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

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 widthvar actualInnerWidth = $("body").prop("scrollWidth"); // El. width minus scrollbar width在JavaScript中：var actualInnerWidth = document.body.clientWidth;     // El. width minus scrollbar widthvar actualInnerWidth = document.body.scrollWidth;     // El. width minus scrollbar widthPS：请注意，要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