我正在尝试编写一个 JavaScript 函数来获取当前浏览器宽度。
我找到了这个:
console.log(document.body.offsetWidth);
但它的问题是,如果身体的宽度为 100%,它就会失败。
还有其他更好的功能或解决方法吗?
我最初的答案是在 2009 年写的。虽然它仍然有效,但我想在 2017 年更新它。浏览器仍然可以表现不同。我相信 jQuery 团队在维护跨浏览器一致性方面做得很好。但是,没有必要包含整个库。在 jQuery 源代码中,相关部分位于dimensions.js 的第 37 行。在这里,它被提取并修改为独立工作:
function getWidth() { return Math.max( document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, document.documentElement.offsetWidth, document.documentElement.clientWidth ); } function getHeight() { return Math.max( document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.documentElement.clientHeight ); } console.log('Width: ' + getWidth() ); console.log('Height: ' + getHeight() );
由于所有浏览器的行为不同,您需要先测试值,然后使用正确的值。这是一个为您执行此操作的函数:
function getWidth() { if (self.innerWidth) { return self.innerWidth; } if (document.documentElement && document.documentElement.clientWidth) { return document.documentElement.clientWidth; } if (document.body) { return document.body.clientWidth; } }
同样对于高度:
function getHeight() { if (self.innerHeight) { return self.innerHeight; } if (document.documentElement && document.documentElement.clientHeight) { return document.documentElement.clientHeight; } if (document.body) { return document.body.clientHeight; } }
getWidth()使用或在您的脚本中调用这两个getHeight()。如果没有定义浏览器的原生属性,它将返回undefined.
getWidth()
getHeight()
undefined