JS、jQuery种种宽高属性

2019年8月31日 119次阅读 来源: luckyw

JS下种种宽高

Window和Document:
JS下宽高分为挂载在Window对象和Document对象下的宽高属性，先说下Window和Document的区分:

  • Window对象示意浏览器中翻开的窗口，window对象能够省略，比方window.alert()能够简写为alert()

  • Document对象是Window对象的一部份，那末window.document.body我们能够写成document.body，浏览器的HTML文档成为Document对象

Window下的宽高属性:

window.innerWidth:浏览器窗口内部宽度
window.innerHeight:浏览器窗口内部高度
window.outerWidth:浏览器窗口外部宽度
window.outerHeight:浏览器窗口外部高度
window.screen.width:屏幕宽度
window.screen.height:屏幕高度
window.screen.availWidth:屏幕的可运用宽度
window.screen.availHeight:屏幕的可运用高度
window.screenTop:浏览器窗口距屏幕顶部的间隔
window.screenLeft:浏览器窗口距屏幕左侧的间隔

注:innerWidth、innerHeight和outerWidth、outerHeight是不支持IE9以下版本的，而screen系列宽高则不存在兼容问题
参考图以下:
《JS、jQuery种种宽高属性》
Document下的宽高属性:
Docment下有三类属性:

  • 与client相干的宽高

  • 与offset相干的宽高

  • 与scroll相干的宽高

与client相干的宽高:

document.body.clientWidth
document.body.clientHeight
document.body.clientLeft
document.body.clientTop

clientWidth和clientHeight该属性指的是元素的可视部份宽度和高度，即padding+content

  • 如果没有滚动条，即为元素设定的高度和宽度

  • 如果涌现滚动条，滚动条会遮掩元素的宽高，那末该属性就是其原本宽高减去滚动条的宽高

clientLeft和clientTop这两个返回的是元素四周边框的厚度，如果不指定一个边框或许不定位该元素，它的值就是0

clientTop = border-top.border-width
clientLeft = border-left.border-width

猎取浏览器窗口可视地区大小在差别浏览器都有用的JS计划:

var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;

与offset相干宽高引见:

document.body.offsetWidth
document.body.offsetHeight
document.offsetLeft
document.offsetTop

offsetWidth与offsetHeight这一对属性指的是元素的border+padding+content的宽度和高度
该属性和其内部的内容是不是超越元素大小无关，只和原本设定的border以及padding和content有关
offsetLeft和offsetTop这两个属性是基于offsetParent的，相识这两个属性我们必须先相识什么是offsetParent
如果当前元素的父级元素没有举行CSS定位（position为absolute或relative）,offsetParent为border.
如果当前元素的父级元素中有CSS定位，offsetParent取近来的谁人父级元素。

  • 在IE6/7中：offsetLeft=(offsetParent的padding-left)+(当前元素的margin-left)

  • 在IE8/9/10及Chrome中：offsetLeft=(offsetParent的margin-left)+(offsetParent的border宽度)+(offsetParent的padding-left)+(当前元素的margin-left)

  • 在FireFox中：offsetLeft=(offsetParent的margin-left)+(offsetParent的padding-left)+(当前元素的margin-left)

与scroll相干宽高引见:

document.body.scrollWidth
document.body.scrollHeight
document.body.scrollLeft
document.body.scrollTop

scrollWidth和scrollHeight:

  • 给定宽高小于浏览器窗口:
    scrollWidth:浏览器窗口的宽度

scrollHeight:浏览器窗口的高度

  • 给定宽高大于浏览器窗口，且内容小于给定宽高:
    scrollWidth:给定的宽度+其所有padding、margin、border

scrollHeight:给定的高度+其所有的padding、margin、border

  • 给定宽高大于浏览器窗口，且内容大于给定宽高:
    scrollWidth:内容宽度+其所有的padding、margin、border

scrollHeight:内容高度+其所有的padding、margin、border

scrollLeft和scrollTop这对属性是可读写的，指的是当元素个中的内容超越其宽高的时刻，元素被卷起来的宽度和高度

Event对象的5种坐标

clientX和clientY，相对于浏览器（可视区左上角0,0）的坐标
screenX和screenY，相对于装备屏幕左上角（0,0）的坐标
offsetX和offsetY，相对于事宜源左上角（0,0）的坐标
pageX和pageY，相对于全部网页左上角（0,0）的坐标
X和Y，原本是IE属性，相对于用CSS动态定位的最内层包涵元素

JQuery下种种宽高

width():元素的content地区宽度
height():元素的content地区高度
innerWidth():元素的content+padding地区宽度
innerHeight():元素的content+padding地区高度
outerWidth(Boolean):可选，默许示意元素的content+padding+border地区的宽度，如果为true示意元素的content+padding+border+margin地区的宽度
outerHeight(Boolean):可选，默许示意元素的content+padding+border地区的高度，如果为true示意元素的content+padding+border+margin地区的高度
scrollLeft():相对于程度滚动条左侧的间隔
scrollTop():相对于垂直滚动条上边的间隔
offset():返回相对于document的当前坐标值，包括left、top值
position():返回相对于offsetParent的当前坐标值，包括left、top值

本文整顿自慕课网课程《JS/jQuery宽高的明白和运用》

    原文作者：luckyw
    原文地址: https://segmentfault.com/a/1190000007681873
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞