美文网首页
DOM-->位置和尺寸

DOM-->位置和尺寸

作者: 卓小生 | 来源:发表于2016-10-06 16:18 被阅读0次

位置和尺寸

位置

offsetLeft, offsetTop

当前元素到定位父级的距离(偏移值)

到当前元素的offsetParent的距离

如果没有定位父级:

  • offsetParent -> body

  • offsetParent -> html

如果有定位父级:

  • ie7以下:如果自己没有定位,那么offsetLeft[Top]是到body的距离
    如果自己有定位,那么就是到定位父级的距离

  • 其他:到定位父级的距离

到文档顶部位置:

function getPos(obj) {    
    var pos = {left:0, top:0};
    
    while (obj) {
        pos.left += obj.offsetLeft;
        pos.top += obj.offsetTop;
        obj = obj.offsetParent;
    }
    
    return pos;
    
}

尺寸

style.width : 样式宽
clientWidth : 可视区宽
offsetWidth : 占位宽

<div style="width: 100px; height: 100px; border: 1px solid red; padding: 10px; margin: 10px;"></div>

<script>
alert( oDiv.style.width );  //100
alert( oDiv.clientWidth );  //样式宽 + padding 120
alert( oDiv.offsetWidth );  //样式宽 + padding + border  122
</script>

相关文章

  • DOM-->位置和尺寸

    位置和尺寸 位置 offsetLeft, offsetTop 当前元素到定位父级的距离(偏移值) 到当前元素的of...

  • 位置和尺寸

    位置 offsetLeft, offsetTop 当前元素到定位父级的距离(偏移值) 到当前元素的offsetPa...

  • ios笔记

    1.位置和尺寸 frame 修改位置和尺寸bounds 修改尺寸center 修改位置 2.textfield s...

  • 课时23 jQuery 获取尺寸和位置

    获取尺寸 获取位置 设置尺寸和位置 注意点

  • DOM 尺寸和位置

    我们经常在页面中,对 DOM 进行一些复杂的操作和计算中会对元素的尺寸和位置做计算,要想对元素的尺寸和位置很好的控...

  • UIView(UIViewAnimation)

    UIView可以设置动画的属性:frame 视图的尺寸和位置bounds 视图的尺寸center 视图的位置tra...

  • Flutter 获取控件尺寸和位置

    这个缺点是这个控件必须已经渲染好了

  • 元素尺寸位置

    offsetWidth/offsetHeight包括padding和border clientWidth/clie...

  • Layer Animation

    1.Position and size 修改位置和尺寸• bounds:• position:• transfor...

  • DOM操作HTML,XML移动元素

    1,DOM-->Documnet Object Model 2.DOM 定义了表示和修改文档所需的方法.DOM对象...

网友评论

      本文标题:DOM-->位置和尺寸

      本文链接:https://www.haomeiwen.com/subject/aeieyttx.html