如何在没有（减号）滚动条的情况下获得屏幕宽度？

Question

我有一个元素，需要它的宽度没有垂直滚动条。Firebug告诉我机身宽度为1280px。这些在Firefox中都可以正常工作：console.log($('.element').outerWidth() );console.log($('.element').outerWidth(true) );$detour = $('.child-of-element').offsetParent();console.log( $detour.innerWidth() );它们都返回1263px，这是我正在寻找的值。但是所有其他浏览器都给我1280px。有没有跨浏览器的方法来获得全屏宽度而没有（！）垂直滚动条？

Answer 1

.prop("clientWidth") 和 .prop("scrollWidth")

var actualInnerWidth = $("body").prop("clientWidth"); // El. width minus scrollbar width

var actualInnerWidth = $("body").prop("scrollWidth"); // El. width minus scrollbar width

在JavaScript中：

var actualInnerWidth = document.body.clientWidth;     // El. width minus scrollbar width

var actualInnerWidth = document.body.scrollWidth;     // El. width minus scrollbar width

PS：请注意，要scrollWidth可靠使用，您的元素不应水平溢出

您也可以使用，.innerWidth()但这仅适用于body元素

var innerWidth = $('body').innerWidth(); // Width PX minus scrollbar 

Answer 2

您只需编写以下代码即可使用香草javascript：

var width = el.clientWidth;

您还可以使用它来获取文档的宽度，如下所示：

var docWidth = document.documentElement.clientWidth || document.body.clientWidth;

您还可以获取整个窗口的宽度，包括滚动条，如下所示：

var fullWidth = window.innerWidth;

但是，并非所有浏览器都支持此功能，因此，作为一种后备方法，您可能希望docWidth按上述方式使用，并增加滚动条的width。

Answer 3

以下是一些假定$element为jQuery元素的示例：

// Element width including overflow (scrollbar)

$element[0].offsetWidth; // 1280 in your case

// Element width excluding overflow (scrollbar)

$element[0].clientWidth; // 1280 - scrollbarWidth

// Scrollbar width

$element[0].offsetWidth - $element[0].clientWidth; // 0 if no scrollbar