首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    详解DOM对象中clientWidth、offsetWidth等属性

    我们有时需要获得鼠标在某盒子中的位置,或者是随意移动某盒子的位置,在这些场景中我们可能经常需要用到clientWidth、offsetWidth、offsetTop啊等等。...以下是示例(div#sub-content没有添加margin): 输出: clientWidth:200+10+10-17(滚动条宽度)=203 二、offsetWidth和offsetHeight...offsetWidth与offsetHeight有个特点,就是这两个属性的值只与该元素有关,与周围元素(父级和子级元素无关)。...offsetWidth=width(样式中设置的)+左右padding+左右border offsetHeight=height(样式中设置的)+上下padding+上下border 以下是示例(#sub-content...也就是说应该是: offsetLeft=(offsetParent的padding-left)+(中间元素的offsetWidth)+(当前元素的margin-left)。

    3K20

    【前端芝士树】详解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth

    深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文将从盒模型开始,一步步涉及一些常见的前端笔试和面试点 主要参考自第一篇文章,然而笔者在读的时候未觉详尽...Netscape4 提供了糟糕的支持,而IE4 虽然接近标准,但依旧未能完全正确的支持标准。...console.log('Dom.getBoundingClientRect().width: ' + dom.getBoundingClientRect().width); //160 5.dom.offsetWidth.../offsetHeight 对象所在元素的实际宽度 console.log('Dom.offsetWidth: ' + dom.offsetWidth); //160 具体情况如图所示 其中,盒模型为标准模型...,元素内容宽度为100px, padding宽度为10px,border宽度为20px, margin宽度为30px 5.DOM属性之 OffsetWidth / ClientWidth / ScrollWidth

    1K60
    领券