javascript和jquery各类宽高的理解(0)

窗口和屏幕

<code>
//浏览器内容+滚动条
console.log("窗口内宽"+window.innerWidth);
//浏览器内容+滚动条+边框
console.log("窗口外宽"+window.outerWidth);
console.log("窗口内高"+window.innerHeight);
console.log("窗口外高"+window.outerWidth);
//系统频幕高度（分辨率1366*768）
console.log("屏幕高"+screen.height); //768
//系统频幕高度- 任务栏高度
console.log("屏幕availHeight"+screen.availHeight);//728
console.log("屏幕宽"+screen.width);
console.log("屏幕availWidth"+screen.availWidth);
//浏览器最外边（边框）离屏幕左边的距离
console.log("屏幕距离顶部"+screenTop);
console.log("屏幕距离左边"+screenLeft);
</code>

可视区域宽高

<code>
// clientHeight = height + padding x 2 - 滚动条的宽度
// clientWidth = width + padding x 2 - 滚动条的宽度
// clientTop = border-height
// clientWidth= border-width
</code>

offset属性

<code>
// offsetHeight = height+padding x 2+border-height x 2+滚动轴= clientHeight+border-height x 2+滚动轴
// offsetWidth = width+border-width+padding x 2+border-width x 2+滚动轴=clientWidth+border-width x 2+滚动轴
</code>

offsetLeft和offsetTop

在了解offsetLeft和offsetTop之前需要先确认的元素的offsetParent对象

offsetParent

• 如果当前父级元素没有设置css定位属性，则offParent为body

• 如果当前父级元素有设置css定位属性，则offsetParent为离元素最近的父级元素

<code>
// offsetLeft = (offsetParent.offsetWidth-当前元素.offsetWidth)/2
</code>

*** 以上的计算公式，仅通过chrom浏览器测试得来，其他的浏览器可能会因为兼容性问题有所差别，欢迎大家指出错误。***