課程
/前端開發
/JavaScript
/JS動畫效果
offsetLeft是如何獲取margin-left的?為什么把left改成margin-left會每次都疊加margin-left的呢?
2017-03-17
源自:JS動畫效果 2-1
正在回答
offseLeft獲取的是【當前對象】跟【具有定位屬性的上級父元素】最左邊的距離,不會獲取margin-left:
????例如:<div style='position:relative'>
????????????????????????<span style='position:absolute; top:20px; left:20px;'>我是當前對象</span>
????????????????<div>
????????在上面,span的父元素使用了相對定位,因此,span對象的offsetLeft屬性獲取的值,就是span到div最左邊的距離。
????另外,offsetLeft屬性獲取的值是只可讀數值(如20,只是個數值,可以用來計算的),而obj.style.left獲取的值是字符串(如20px),并且是可以讀寫的,這是二者之間的差別。所以在js動畫里,要用offsetLeft獲取的值來進行數學計算設置動畫,而不是用obj.style.left獲取的字符串。
對于你說的【left改成margin-left會每次都疊加margin-left】,這里的left就是obj.style.left,它在css里面對應的,是定位的左邊距離,是從對象的盒子最外邊開始計算的。而margin-left是盒子模型中的外邊距部分,你把左邊距改成外邊距,當然是外邊距增加啦
舉報
通過本課程JS動畫的學習,從簡單動畫開始,逐步深入各種動畫框架封裝
2 回答假如將left改成margin-left效果就變了,沒搞懂
3 回答chrome下如何獲取樣式是怎樣的
2 回答如何獲取樣式中的初始值
1 回答這個offsetLeft
2 回答這里的offsetWidth為何不可以換成offsetLeft
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2017-03-18
offseLeft獲取的是【當前對象】跟【具有定位屬性的上級父元素】最左邊的距離,不會獲取margin-left:
????例如:<div style='position:relative'>
????????????????????????<span style='position:absolute; top:20px; left:20px;'>我是當前對象</span>
????????????????<div>
????????在上面,span的父元素使用了相對定位,因此,span對象的offsetLeft屬性獲取的值,就是span到div最左邊的距離。
????另外,offsetLeft屬性獲取的值是只可讀數值(如20,只是個數值,可以用來計算的),而obj.style.left獲取的值是字符串(如20px),并且是可以讀寫的,這是二者之間的差別。所以在js動畫里,要用offsetLeft獲取的值來進行數學計算設置動畫,而不是用obj.style.left獲取的字符串。
對于你說的【left改成margin-left會每次都疊加margin-left】,這里的left就是obj.style.left,它在css里面對應的,是定位的左邊距離,是從對象的盒子最外邊開始計算的。而margin-left是盒子模型中的外邊距部分,你把左邊距改成外邊距,當然是外邊距增加啦