JavaScript获取网页的宽高

获取网页可视区域的宽高,分不同情况下共计三种方式:

可视区域:当前浏览器窗口可见的部分,不包括可以滚动的区域。

方法一:IE9及IE9以上的浏览器

使用innerWidth、innerHeight可以获取网页可视区域的宽高

console.log(window.innerWidth);//可视区域的宽
console.log(window.innerHeight);//可视区域的高
方法二:标准模式下(所有高级或低级浏览器)

浏览器在渲染网页的时候有两种模式:“标准模式(CSS1Compat)”、“混杂模式/怪异模式(BackCompat)”默认情况下都是以标准模式来渲染的。
如果网页没有书写文档声明就会按照”混杂模式/怪异模式“来进行渲染

使用document.documentElement.clientWidth、document.documentElement.clientHeight可以获取网页可视区域的宽高

console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
方法三:混杂模式
 console.log(document.body.clientWidth, document.body.clientHeight);

猜你喜欢

转载自blog.csdn.net/Cao_Mary/article/details/90082288