Question

我正在开发一个更大的项目，但我简化了它，所以我可以运行一些测试并尝试解决这个错误。这是我为此测试创建的代码：

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        function browserWidth(){
            $('#bWidth').html( $(window).width() );
            $('#foo').removeAttr();
            $('#foo').attr('width', $(window).width() );
            $('#dWidth').html( $('#foo').attr('width') );
        }
        $(window).resize(browserWidth);
    </script>
    <style>
    body
    {
        background-color: black;
        color: orange;
    }

    #foo
    {
        border-style: outset;
        border-width: 5px;
        border-color: green;
        margin: 0 auto;
        width: 150px;
        text-align: center;
    }
    </style>
</head>

<body>

    <div id="foo">
        <h1>H1 text</h1>
        <h2>H2 text</h2>
        <h3>H3 text</h3>
    </div>

    <p>browser width: <span id="bWidth"></span></p>
    <p>div width: <span id="dWidth"></span></p>

</body>

这样做的目的是改变div的宽度以匹配当前窗口的宽度。如果你保存并在浏览器中打开它，你会看到底部更新的两个

标签应该是（带有窗口宽度和div宽度属性的值）但是div的宽度保持在150px（因为它最初在#foo css规则中设置）。这尤其令人困惑，因为如果您检查元素，您可以看到width属性的值随着窗口调整大小而改变

Answer 1

您需要更改样式值，而不是宽度属性

jQuery(function () {
    function browserWidth() {
        $('#foo').css('width', $(window).width());
        $('#bWidth').html($(window).width());
        $('#dWidth').html($('#foo').width());
    }
    $(window).resize(browserWidth).resize();//the last call to resize is to trigger a manual resize event so that the initial values will be set properly
})

演示：Fiddle

宽度值更改但div的实际宽度不会更改

1 个答案: