最近在開(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)的，歡迎各路大神糾正~
