Js动画(四) ---获取样式
2017-03-13 本文已影响29人
大海孤了岛
先上效果图：
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]支持火狐和谷歌浏览器。
