先上效果圖：
animation.gif
實際上，就是改變一個div寬度的效果
初步實現過程：
a. 簡單地定義一個div
<body>
<div id="div1"></div>
</body>
b. 定義div的樣式：
<style>
#div1 {
width: 200px;
height: 200px;
background: #ff0;
border: 2px solid #000;
}
</style>
c. 實現js動畫：
<script>
window.onload = function () {
startMove();
};
function startMove() {
/**
* 定義一個時間函數每30ms減少一次div的寬度
*/
setInterval(function () {
//獲取到div對象
var oDiv = document.getElementById("div1");
//減少div的寬度
//注意這里要先用parseInt方法獲取到數值，然后才可以進行減法運算，最后記得加上單位
oDiv.style.width = parseInt(oDiv.style.width) - 2 + 'px';
}, 30);
}
</script>
這樣我們的初步設計就完成，點擊運行，結果發現，div的寬度并不會改變！！！
因為我們使用obj.style.width方法只能獲取到行內樣式，不能獲取到非行內樣式！
因此，我們修改如下：實際上就是增加了樣內樣式
<body>
<div id="div1" style="width: 200px"></div>
</body>
但這樣的話，我們就無法將html與css分離，這明顯不是一個很好的辦法。
實際上，獲取非行內樣式，我們可以采用另一個方法--- currentStyle(針對IE)和getComputedStyle(針對火狐和谷歌)
修改如下：
setInterval(function () {
//獲取到div對象
var oDiv = document.getElementById("div1");
//減少div的寬度
//注意這里要先用parseInt方法獲取到數值，然后才可以進行減法運算，最后記得加上單位
oDiv.style.width = parseInt(window.getComputedStyle(oDiv, null)['width']) - 2 + 'px';
}, 30);
但以上只是針對谷歌或狐火，但并不支持IE，因此，我們需要進一步修改。
/**
* 封裝一個函數用來獲取樣式
* @param obj 傳入的元素對象
* @param attr 傳入要獲取的樣式
* @returns {*}
*/
function getStyle(obj, attr) {
//判斷是否支持currentStyle屬性，若為IE則支持
if (obj.currentStyle){
//返回該樣式
return obj.currentStyle[attr];
}
//若不支持，則使用getComputedStyle方法，使得火狐和谷歌支持
else {
return getComputedStyle(obj, null)[attr];
}
}
調用方法如下：
//這里調用getStyle函數去獲取到樣式
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() {
/**
* 定義一個時間函數每30ms減少一次div的寬度
*/
setInterval(function () {
//獲取到div對象
var oDiv = document.getElementById("div1");
//減少div的寬度
//這里調用getStyle函數去獲取到樣式
oDiv.style.width = parseInt(getStyle(oDiv, 'width')) - 2 + 'px';
}, 30);
}
/**
* 封裝一個函數用來獲取樣式
* @param obj 傳入的元素對象
* @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>
總結：
JS中 obj.style.attr 只能獲取行內樣式
要獲取非行內樣式要通過obj.currentStyle[attr]或者getComputedStyle(obj,false)[attr]方法獲取
其中obj.currentStyle[attr]只支持IE瀏覽器，getComputedStyle(obj,false)[attr]支持火狐和谷歌瀏覽器。
