jquery - 如何在调整大小时使用 jquery/js 获取绝对/固定元素的宽度？

Question

假设您有一个固定或绝对定位的元素:

<div>
   My fixed div.
</div>

使用以下 CSS:

div:first-of-type {
    background-color: red;
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
}

您可以通过以下方式计算出宽度:

$(function() {
    $(window).resize(function() {
        var $myFixedDiv = $('div:first');

        console.log($myFixedDiv.width()); //$myFixedDiv.innerWidth(), $myFixedDiv.outerWidth() 
    });

});

但是，当您调整窗口大小时，firefox 和 chrome 报告的宽度均为 0。

如何计算出真正的宽度是多少？

Answer 1

您可以取窗口的宽度和两个轴的负 40。

var width = $(window).width()-40;
var height = $(window).height()-40;

然后，与其使用 css top、left、bottom 和 right 来设置宽度，因为我认为从长远来看是不可靠的，我会使用 js 设置 div 的宽度

var myDiv = $('#myDiv');
myDiv.width = width;
myDiv.height = height;