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