0
点赞
收藏
分享

微信扫一扫

JavaScript offset使用

奋斗De奶爸 2021-09-24 阅读 74
基础前端

一、快捷位置和尺寸

DOM已经提供给我们计算后的样式,但是还觉得不方便,所以DOM又提供给我们一些API:

ele.offsetLeft

ele.offsetTop

ele.offsetWidth

ele.offsetHeight

ele.clientWidth

ele.clientHeight

1.1 offsetLeft属性和offsetTop属性

这两个属性的兼容性非常差,不要着急,我们慢慢来看。

IE9、IE9+、Chrome等高级浏览器:

一个元素的offsetLeft值,就是这个元素左边框外,到自己的offsetParent对象的左边框内的距离。

每一个元素,天生都有一个属性,叫做offsetParent,表示自己的“偏移参考盒子”,我们不称呼中文,就叫offsetParent。这个offsetParent是谁呢?

就是自己祖先元素中,离自己最近的已经定位的元素,如果自己的祖先元素中,没有任何盒子进行了定位,那么offsetParent****对象就是body****。

IE6、IE7:

IE6、7的offsetParent对象是谁,和高级浏览器有非常大的不同。

情形1:自己如果没有定位属性,那么自己的offsetParent对象就是自己的祖先元素中离自己最近的有width或者有height的元素:

    <div class="box1">
        <div class="box2">  → 你好,我有宽度 , offsetParent
            <div class="box3"> → 你好,我没有宽高 
                <p></p>   → 你好,我没有定位
            </div>
        </div>
    </div>
    <div class="box1">
           <div class="box2">
                <div class="box3"> →  你好,我没有宽高,有定位 , offsetParent
                       <p></p> →  你好,我没有定位
                </div>
           </div>
     </div>

情形2:自己如果有定位属性

那么自己的offsetParent就是自己祖先元素中离自己最近的有定位的元素。

数值就是自己的左外边框到offsetParent对象的左内边框的值。

IE8:

IE8的offsetParent是谁呢?和高级浏览器一致:

无论自己是否定位,自己的offsetParent就是自己祖先元素中,离自己最近的已经定位的元素。

这一点,没有任何兼容问题!

但是,多算了一条边框


总结:

名称 IE6、7 IE8 IE9、IE9+、高级浏览器
offsetParent 如果自己没有定位,那么就是自己父亲中有width或者有height或者有定位的元素如果自己有定位,那么就是和高级浏览器一致。 和高级浏览器一致 自己祖先元素中,离自己最近的已经定位的元素
offsetLeft 和高级浏览器一致 多算一条border 自己的border外到offsetParet对象的border内

兼容性解决办法,不是能力检测,也不是版本检测,而是善用这个属性,要确保属性的使用条件:

自定位,父无边(父亲也要定位,但是为了顺口,就不多说了)

这样的话,所有浏览器的值都是一样的,offsetLeft、offsetTop值是number类型的,可以直接参与运算,不需要parseInt()

1.2 offsetWidth和offsetHeight

全线兼容,是自己的属性,和别的盒子无关。

一个盒子的offsetWidth值就是自己的 width+左右padding+左右border的宽度

如果盒子没有宽度,那么所有浏览器都将把px值当做offsetWidth,而不是100%;

如果盒子没有高度,用文字撑的,所有浏览器都将把px值当做offsetHeight

总结一下,全线兼容。

特别注意,IE6、7、8下,盒子没有高度,文字撑的,用currentStyle.height是auto。体现出了offsetHeight的好用。

1.3 clientWidth和clientHeight

全线兼容,就一丢丢IE6的问题

client表示“客户端”这里就是一个名字而已,不用在意这个名字。

clientWidth就是自己的width+padding的值。 也就是说,比offsetWidth少了border。

如果盒子没有宽度,那么那么所有浏览器都将把px值当做clientWidth,而不是100%

如果盒子没有高度,用文字撑的,IE6 clientHeight****是0****,其他浏览器都是数值

总结一下,我们的6个属性要铭记于心,就offsetLeft、offsetTop比较闹腾,但是合理使用,也没兼容问题了。

举报

相关推荐

0 条评论