先上效果圖：
animation.gif
實(shí)際上摧扇，就是改變一個(gè)div寬度的效果
初步實(shí)現(xiàn)過(guò)程：
a. 簡(jiǎn)單地定義一個(gè)div
<body>
<div id="div1"></div>
</body>
b. 定義div的樣式：
<style>
#div1 {
width: 200px;
height: 200px;
background: #ff0;
border: 2px solid #000;
}
</style>
c. 實(shí)現(xiàn)js動(dòng)畫(huà)：
<script>
window.onload = function () {
startMove();
};
function startMove() {
/**
* 定義一個(gè)時(shí)間函數(shù)每30ms減少一次div的寬度
*/
setInterval(function () {
//獲取到div對(duì)象
var oDiv = document.getElementById("div1");
//減少div的寬度
//注意這里要先用parseInt方法獲取到數(shù)值，然后才可以進(jìn)行減法運(yùn)算蟹演，最后記得加上單位
oDiv.style.width = parseInt(oDiv.style.width) - 2 + 'px';
}, 30);
}
</script>
這樣我們的初步設(shè)計(jì)就完成机久，點(diǎn)擊運(yùn)行，結(jié)果發(fā)現(xiàn)藏鹊，div的寬度并不會(huì)改變Ｈ蠹ァ！盘寡！
因?yàn)槲覀兪褂胦bj.style.width方法只能獲取到行內(nèi)樣式楚殿，不能獲取到非行內(nèi)樣式！
因此竿痰，我們修改如下：實(shí)際上就是增加了樣內(nèi)樣式
<body>
<div id="div1" style="width: 200px"></div>
</body>
但這樣的話脆粥，我們就無(wú)法將html與css分離，這明顯不是一個(gè)很好的辦法影涉。
實(shí)際上变隔，獲取非行內(nèi)樣式，我們可以采用另一個(gè)方法--- currentStyle(針對(duì)IE)和getComputedStyle(針對(duì)火狐和谷歌)
修改如下：
setInterval(function () {
//獲取到div對(duì)象
var oDiv = document.getElementById("div1");
//減少div的寬度
//注意這里要先用parseInt方法獲取到數(shù)值蟹倾，然后才可以進(jìn)行減法運(yùn)算匣缘，最后記得加上單位
oDiv.style.width = parseInt(window.getComputedStyle(oDiv, null)['width']) - 2 + 'px';
}, 30);
但以上只是針對(duì)谷歌或狐火，但并不支持IE鲜棠，因此肌厨，我們需要進(jìn)一步修改。
/**
* 封裝一個(gè)函數(shù)用來(lái)獲取樣式
* @param obj 傳入的元素對(duì)象
* @param attr 傳入要獲取的樣式
* @returns {*}
*/
function getStyle(obj, attr) {
//判斷是否支持currentStyle屬性豁陆，若為IE則支持
if (obj.currentStyle){
//返回該樣式
return obj.currentStyle[attr];
}
//若不支持柑爸，則使用getComputedStyle方法，使得火狐和谷歌支持
else {
return getComputedStyle(obj, null)[attr];
}
}
調(diào)用方法如下：
//這里調(diào)用getStyle函數(shù)去獲取到樣式
oDiv.style.width = parseInt(getStyle(oDiv, 'width')) - 2 + 'px';
完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get Style</title>
<style>
#div1 {
width: 200px;
height: 200px;
background: #ff0;
border: 2px solid #000;
}
</style>
<script>
window.onload = function () {
startMove();
};
function startMove() {
/**
* 定義一個(gè)時(shí)間函數(shù)每30ms減少一次div的寬度
*/
setInterval(function () {
//獲取到div對(duì)象
var oDiv = document.getElementById("div1");
//減少div的寬度
//這里調(diào)用getStyle函數(shù)去獲取到樣式
oDiv.style.width = parseInt(getStyle(oDiv, 'width')) - 2 + 'px';
}, 30);
}
/**
* 封裝一個(gè)函數(shù)用來(lái)獲取樣式
* @param obj 傳入的元素對(duì)象
* @param attr 傳入要獲取的樣式
* @returns {*}
*/
function getStyle(obj, attr) {
//判斷是否支持currentStyle屬性盒音，若為IE則支持
if (obj.currentStyle){
//返回該樣式
return obj.currentStyle[attr];
}
//若不支持表鳍，則使用getComputedStyle方法，使得火狐和谷歌支持
else {
return getComputedStyle(obj, null)[attr];
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
總結(jié)：
JS中 obj.style.attr 只能獲取行內(nèi)樣式
要獲取非行內(nèi)樣式要通過(guò)obj.currentStyle[attr]或者getComputedStyle(obj,false)[attr]方法獲取
其中obj.currentStyle[attr]只支持IE瀏覽器祥诽，getComputedStyle(obj,false)[attr]支持火狐和谷歌瀏覽器譬圣。
