首页 > 其他分享 >DOM 获取元素偏移量、元素尺寸以及可视窗口尺寸

DOM 获取元素偏移量、元素尺寸以及可视窗口尺寸

时间:2023-02-14 16:58:44浏览次数:43  
标签:offsetParent DOM text 元素 偏移量 width 尺寸 var

DOM 获取元素偏移量、元素尺寸以及可视窗口尺寸

1. 获取元素对象
var o_text = document.getElementById(‘id名称’);//返回:这个元素 或 null
var o_text = document.getElementsByClassName(‘类名’);//返回:伪数组 或 空伪数组
var o_text = document.getElementsByTagName(‘标签名’)//返回:伪数组 或 空伪数组
var o_text = document.querySelector(‘选择器’)//返回:第一个对应的选择器元素 或 null
var o_text = document.querySelectorAll(‘选择器’)//返回:伪数组 或 空伪数组
var o_body = document.body;//body
var o_html = documnent.documentElement;//html

2. 获取元素尺寸
2.1 相对宽高:width/height + border + padding
凡是offset获取的值都不带px单位!!!!
var o_width = o_text.offsetWidth;
var o_height = o_text.offsetHeight;
2.2 可视宽高:width/height + padding
var o_width = o_text.clientWidth;
var o_height = o_text.clientHeight;

3. 获取元素偏移量
3.1 当前元素相对于 页面/父元素 左边/上边 的距离
与定位有关,有定位则相对于父元素
var l = o_div.offsetLeft;
var t = o_div.offsetTop;
3.2 左/上边框的宽度(及边框厚度),以像素表示
var cr = o_div.clientLeft;
var ct = o_div.clientTop;
————————————————
版权声明:本文为CSDN博主「不想掉头发的小猴子」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_57135131/article/details/127795638

定位父级

定位父级(offsetParent)值的是与当前元素最近的经过定位(position不等于static)的父级元素,主要分为下列几种情况

  1. 元素自身有fixed定位,那么offsetParent结果为null。因为fixed相对的是视口定位
  2. 元素自身无fixed定位,且父级元素都未经过定位,offsetParent的结果为<body>。 <body>元素的offsetParent为null
  3. 元素自身无fixed定位,且父级元素存在经过定位的元素,offsetParent的结果为离自身元素最近的经过定位的父级元素

offsetHeight

offsetHeight表示元素在垂直方向上占用的空间大小,无单位(以像素px计)

offsetHeight = border-top-width + padding-top + height + padding-bottom + border-bottom-width

offsetWidth

offsetWidth表示元素在水平方向上占用的空间大小,无单位(以像素px计)

offsetWidth = border-left-width + padding-left + width + padding-right + border-right-width


注意: 如果元素有垂直滚动条,offsetWidth包含滚动条的宽度;如果元素有水平滚动条,offsetHeight包含滚动条的高度

offsetTop

offsetTop表示元素的上外边框至offsetParent元素的上内边框之间的像素距离

offsetLeft

offsetLeft表示元素的左外边框至offsetParent元素的左内边框之间的像素距离

页面偏移

要获取元素在页面上的偏移量,可以把该元素的offsetLeft和offsetTop与其offsetParent元素的offsetLeft和offsetTop相加,一直循环到根元素,就可以获取元素在页面上的偏移量

注意事项

  1. 偏移量属性是只读的
  2. 设置了display:none;的元素,偏移量属性值为0
  3. 每次访问偏移量属性都会重新计算。出于性能考虑,对于需要重复计算偏移量的元素,可以把值保存到变量中

 

标签:offsetParent,DOM,text,元素,偏移量,width,尺寸,var
From: https://www.cnblogs.com/niufang/p/17120109.html

相关文章