帶邊框的簡單變寬運動出現的問題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div{
width: 200px;
height: 200px;
background:#f00;
border:10px solid blue;
}
</style>
<script>
window.onload=function(){
startMove();
}
function startMove(){
setInterval(function(){
var div = document.getElementById('div');
div.style.width=parseInt(getStyle(div,'width'))-2+'px';
},30)
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>
總結：
obj.style.width： 只能獲取行內樣式的屬性，得不到css內聯樣式和外部連結樣式的屬性；
obj.setoffWidth：獲得div的寬度（包括邊框的寬度），若用setoffWidth，會獲得元素+邊框的寬度,可能出現動畫錯亂(相反方向或者不動)；
parseInt()： 解析一個字串並返回一個整數，且只會提取字串字母值錢的數字。例:parseInt('10px11') 返回10
currentStyle： 獲取內聯樣式和外部連結的屬性，只相容ie
getComputedStyle： 獲取內聯樣式和外部連結的屬性，相容火狐谷歌
以上兩個方法只能獲取屬性，不能設定屬性