jquery - 如何更改未声明元素的 css 属性？

Question

我有一些元素(特别是包含 iframe 的 div)使用 php 添加到 html 页面的面板中，因此没有包含也没有在开头声明。

同时，这两个元素有一些已经在适当的样式表中声明的 CSS 属性；我想动态更改这两个元素的大小，一次是在加载页面时，一次是在每次调整页面大小时。

我正在尝试以这种方式在 jQuery 中这样做(div 的 ID 为“wrap”，iframe 的 ID 为“frame”):

var h = $(window).height()*0.8;
var w = $(window).width()*0.3;
$("#wrap").css(height, h);
$("#wrap").css(width, w);
$("#frame").css(height, h);
$("#frame").css(width, w);

$(window).bind('resize', function () {
    var h = $(window).height()*0.8;
    var w = $(window).width()*0.3;
    $("#wrap").css(height, h);
    $("#wrap").css(width, w);
    $("#frame").css(height, h);
    $("#frame").css(width, w);
});

所有这些代码都在 $(document).ready 函数中。
由于某些原因它不起作用:我检查了很多次，jQuery 似乎无法更改页面中尚未声明的元素的属性，例如“wrap”或“frame”。
关于如何解决问题的任何想法？


编辑: 我尝试了答案中建议的方法，但虽然它解决了错误(我注意到页面渲染在声明这些元素后停止了)，但 div 的视觉效果仍然没有变化和 iframe。

ajax调用是这样的:

$.ajax({
            type: 'POST',
            url: 'SetFrame.php',
            headers: {'Content-type': 'application/x-www-form-urlencoded'},
            data: "uri=" + uri,
            dataType: 'html',
            success: function (result) {
                loadBar();
                $("#panelP").empty();
                $("#panelP").append(result);
                scrollBar();
                refreshSize();
            },

            error: function (){
                alert("ERROR");
            }


        });

refreshSize()就是这个函数，刚准备好的:

function refreshSize()
{
    var h = $(window).height()*0.8;
    var w = $(window).width()*0.3;
    $("#wrap").css(height, h);
    $("#wrap").css(width, w);
    $("#frame").css(height, h);
    $("#frame").css(width, w);
}

Answer 1

无需重复您的代码，您只需在声明事件处理代码后立即触发 resize。

将代码包装在 ready 处理程序中，以确保元素在首次运行时存在

$(function(){    
    $(window).on('resize', function () {
        var h = $(window).height()*0.8;
        var w = $(window).width()*0.3;
        $("#wrap").css(height, h);
        $("#wrap").css(width, w);
        $("#frame").css(height, h);
        $("#frame").css(width, w);
    // now trigger this event to set dimensions for these elements (if they exist)
    }).resize();
});

如果元素在初始页面加载后加载，当它们存在于 DOM 中时，您可以通过调用 $(window).resize()

再次触发调整大小事件