Question

我有一些元素（特别是包含iframe的div），它们使用php添加到html页面的面板中，所以不包括在内，也不在开头声明。

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

我试图以这种方式这样做，在jQuery中（div有id＆＃34; wrap＆＃34;，iframe有id＆＃34; frame＆＃34;）：

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无法更改页面中尚未声明的元素的属性，例如＆＃34; wrap＆＃34;或＆＃34;框架＆＃34;。
有关如何解决问题的任何想法？

编辑：我尝试了答案中建议的方法，但是虽然它解决了错误（我注意到在声明这些元素后页面渲染停止了），但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();
});

如果在初始页面加载后加载元素，则可以通过调用$(window).resize()

再次触发DOM中存在的resize事件

Answer 2

我会这样做，因为我觉得它组织得更好：

$(document).ready(function() {
    refreshSize();
});

$(window).on('resize', function() {
    refreshSize();
});

var refreshSize = 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);
};

我认为这只是一个偏好。

编辑：
请注意，在.css功能中，您正在呼叫css height和width而不是撇号'' !!

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

2 个答案: