最近在開(kāi)發(fā)中金麸,遇到一個(gè)奇怪的問(wèn)題。給一張圖片設(shè)置寬高簿盅,然后因?yàn)樾枨蠡酉拢诹硪粋€(gè)函數(shù)獲取該img的寬高,發(fā)現(xiàn)總獲取上一次的寬高值桨醋。為了更好的說(shuō)明棚瘟,寫了個(gè)小demo。
html:
<body>
<img class="css-image" src="./9ddb5e9.png">
<input type="button" value="button" onclick="func()">
</body>
css:
.css-image{
width:200px;
height:200px;
-moz-transition: all 0.5 ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
js:
<script>
var $img = $("img");
function func(){
var height = $img.height();
var width = $img.width();
height += 100;
width += 100;
$img.height(height);
$img.width(width);
console.log(`最新的高度是:${height}`);
console.log(`jquery height()方法獲取的高度: ${ $img.height()}`);
console.log(`jquery css()方法獲取的高度: ${$img.css("height")}`);
console.log(`js原生.clientHeight獲取的高度: ${ $img[0].clientHeight}`);
console.log(`=============================================`);
}
</script>
可以看到圖片的初始寬高都是200px喜最,每次點(diǎn)擊按鈕偎蘸,就將圖片的寬高增加100px,然后立馬獲取圖片的寬高在控制臺(tái)打印出來(lái),結(jié)果如下:
從js代碼看瞬内,是看不到哪一句代碼會(huì)導(dǎo)致這個(gè)結(jié)果迷雪,而且查bug的時(shí)候,打斷點(diǎn)的時(shí)候結(jié)果是正確的遂鹊≌穹Γ回過(guò)頭看css代碼,發(fā)現(xiàn)為了讓圖片的動(dòng)畫特效更緩和秉扑,加了transition過(guò)渡效果,而導(dǎo)致寬高獲取錯(cuò)誤的正是它≈勐剑回去細(xì)讀了transition定義:
因?yàn)樵O(shè)置 transition: all 0.5s ease;那么瀏覽器就會(huì)檢測(cè)該節(jié)點(diǎn)的所有改變误澳,500ms之后才完成這個(gè)改變。那我們改變圖片的寬高秦躯,瀏覽器底層要500ms后才去改變盒模型忆谓。
css3過(guò)渡、動(dòng)畫等效果踱承,細(xì)想來(lái)倡缠,他們也是要底層動(dòng)態(tài)地去改變的,而不是‘靜態(tài)’的茎活,以后在查bug昙沦,可以不只從js代碼層面展開(kāi),也可以去檢查下是不是跟css代碼相關(guān)载荔。
最后盾饮,嘮叨下,本人前端新開(kāi)發(fā)一枚懒熙,有什么不正確丘损,可以改進(jìn)的,歡迎各路大神糾正~