Question

我有一个水平滚动的网站，它有一个id = "bookWrap"的div，其中填充了inline-block个元素，因此我不知道宽度，但它远远扩展了我的viewPort。

尝试通过$('#bookWrap').width()获取此元素的宽度时，jQuery返回的视口宽度为1680，而不是元素的实际宽度。

如何获取超出视口的元素的真实宽度？

Answer 1

考虑到更多的解决方法，因为看起来jQuery width()和outerWidth()由于某种原因，都会在视口宽度处切断。

alert(getTotalWidth("#bookWrap DIV"));

function getTotalWidth(selector) {
    var totalWidth = 0;
    $(selector).each(function() {
        totalWidth += $(this).outerWidth();
    });
    return totalWidth;
}

Fiddle here

Answer 2

outerWidth（）会为您提供其他内容吗？

http://api.jquery.com/outerWidth/

Answer 3

也许你应该计算宽度：

var width = 0;
$('#bookWrap div').each(function(){
   width += $(this).width();
});
alert(width);

看这里：http://jsfiddle.net/szKkT/4/

Answer 4

您可以使用此代码段检查哪些元素大于您的视口：

$('*').each(function () {
   var viewportWidth = 768;
   if($(this).outerWidth() > viewportWidth ){
     //prints element in console so you can check what's the element
     console.log($(this)[0]); 
   }
});

Answer 5

您可以使用元素scrollWidth属性：

var realWidth = document.getElementById('#bookWrap').scrollWidth;

jQuery获取大于视口的元素的宽度

5 个答案: