1

我试图通过 jQuery 给我的容器元素高度和宽度，.css()但我的代码将它设置为窗口高度和宽度。谁能告诉我为什么代码不起作用？

下面是代码：

$(document).ready(function () {
    var H = $(window).height();
    var W = $(window).width();
    var h = W / 1.625;
    var w = H * 1.625;
    if (w > W) {
        $("#container").css("height", h + 'px').css("maxWidth", W + 'px;');
    else {
        $('#container').css("maxHeight", H + 'px').css("width", w + 'px;');
    }
});
4

2 回答 2

6

您的 if 语句缺少 a }，因此一开始就不起作用。改变：

if(w>W)  
{
    $("#container").css("height", h+'px').css("maxWidth", W+'px;');
    else
        ...

至：

if(w>W)  
{
    $("#container").css("height", h+'px').css("maxWidth", W+'px;');    
}                
else
    ...

此外，当您设置多个 CSS 属性时，您可以通过将属性作为对象传递来将它们组合成一个 CSS 方法：

if (w>W) 
{
    $("#container").css({height:h, maxWidth:w});
}
...

px在大多数情况下，jQuery 会为您解决问题。有关更多信息，请参阅 jQuery 的css()文档。:)

于 2013-05-22T13:28:13.330 回答
2

您在}上缺少右括号，if因此您的代码应如下所示，

if (w > W) {
    $("#container").css("height", h + 'px').css("maxWidth", W + 'px;');  
}
else {
    $('#container').css("maxHeight", H + 'px').css("width", w + 'px;');
}

您可以通过将 css 属性作为对象的一部分而不是链接来提高代码的可读性，因为当您将它们作为对象传递时，添加许多属性会很有帮助。

if (w > W) {
    $("#container").css({
         "height": h + 'px', 
         "max-width": W + 'px'
    });  
}
else {
    $("#container").css({
         "max-height": H + 'px', 
         "width": w + 'px'
    });
}
于 2013-05-22T13:29:32.953 回答