js获取浏览器/界面宽高的问题_以及兼容性实现方案

摘要:js获取浏览器/界面宽高的问题:clientHeight和clientWidth获取可视区域大小,scrollHeight和scrollWidth获取网页内容高度和宽度。offsetHeight和offsetWidth,获取网页内容高度和宽度(可视区域包括滚动条等边线,会随窗口的显示大小改变)

1.对于IE9 +,Chrome,Firefox,Opera以及Safari:

  • window.innerHeight - 浏览器内部界面的高度(内容显示区域的高度,F12后会实时改变)
  • window.outerHeight - 浏览器窗体的高度(浏览器的高度)
  • window.innerWidth - 浏览器内部界面的宽度(内容显示区域的宽度,F12后会实时改变)
  • window.outerWidth - 浏览器窗体的宽度(浏览器的宽度)


2.clientHeight(可视区域大小):

  • document.documentElement.clientHeight  表示HTML文档所在窗口的可视区域高度(类似于window.innerHeight)
  • document.body.clientHeight  表示身体的可视区域高度
  • document.documentElement.clientWidth  表示HTML文档所在窗口的可视区域宽度(类似于window.innerWidth)
  • document.body.clientWidth  表示身体的可视区域宽度


3.scrollHeight,scrollWidth(获取网页内容高度和宽度)

  • document.documentElement.scrollWidth || document.body.scrollWidth 
  • document.documentElement.scrollHeight || document.body.scrollHeight 


4.offsetHeight网页尺寸

offsetHeight和offsetWidth,获取网页内容高度和宽度(可视区域包括滚动条等边线,会随窗口的显示大小改变)

  • document.documentElement.offsetWidth || document.body.offsetWidth;
  • document.documentElement.offsetHeight || document.body.offsetHeight;

高度,clientHeight,scrollHeight属性,的offsetHeight区别图解 


scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离,即左边灰色的内容。
scrollTop的:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离,即上边灰色的内容。
offsetLeft:获取指定对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置。
的offsetTop:获取指定对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置。

注意:
1.区分大小写
2。 offsetParent :布局中设置属性(相对,绝对,固定)的父容器,从最近的父节点开始,一层层向上找,直到HTML的正文。


兼容性的JS方案:

var w = window.innerWidth || document.documentElement.clientWidth; 
var h = window.innerHeight || document.documentElement.clientHeight;



本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_813