js动画之获取元素属性
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js动画之获取元素属性相关的知识，希望对你有一定的参考价值。
首先我们要介绍一些知识
offsetWidth
element.offsetWidth = width + padding + border;
width
我们也知道element.style.width 这个属性一般用来修改属性，那么在获取这个属性的时候，
如果这个元素的的样式是定义在css的文件或者头样式中，都是获取不到的，只有行内样式才是获取到
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取样式</title> <style> .animation{ background-color: green; height: 200px; width: 200px; border: 1px solid #000; } </style> </head> <body> <div id="test" class="animation"></div> </body> <script type="text/javascript"> window.onload = function(){ var ele = document.getElementById("test"), timer = null; ele.onmouseover = function(){ startAnimation(); } function startAnimation(){ clearInterval(timer); var _ele = document.getElementById("test"); timer = setInterval(function(){ //_ele.style.width = _ele.offsetWidth -1 +‘px‘;//1 offsetWidth = width + padding + border console.log(_ele.style.width);//2 当width不写入行内style="width:200px"中的话，定义在css文件中，获取不到width //_ele.style.width = parseInt(_ele.style.width) - 1 +‘px‘;//3 offsetWidth = width + padding + border // },100) } } </script> </html>
我们把1和3 注释了，2注释打印就可以看出，是获取不到的width是200值的。只有把
<div id="test" class="animation" style="width:200px;"></div>
这样就可以获得到width的值
现在我们来做一写测试，给这个div宽度缩小的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取样式</title>
<style>
.animation{
background-color: green;
height: 200px;
width: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="test" class="animation" ></div>
</body>
<script type="text/javascript">
window.onload = function(){
var ele = document.getElementById("test"),
timer = null;
ele.onmouseover = function(){
startAnimation();
}
function startAnimation(){
clearInterval(timer);
var _ele = document.getElementById("test");
timer = setInterval(function(){
_ele.style.width = _ele.offsetWidth -1 +‘px‘;//1 offsetWidth = width + padding + border
//onsole.log(_ele.style.width);//2 当width不写入行内style="width:200px"中的话，定义在css文件中，获取不到width
//_ele.style.width = parseInt(_ele.style.width) - 1 +‘px‘;//3 offsetWidth = width + padding + border //
},100)
}
}
</script>
</html>
但是我们看到的是这个元素在变大，这个是为什么呢？这个就是offsetWidth的原因，
1.开始的时候offsetWidth = width(200px)+padding(0px)+border(1+1) = 202px;
那么_ele.style.width = 202-1 = 201px;
2.当下一个计算，
那么offsetWidth = width(201)+padding(0px)+border(1+1) = 203px;
那么_ele.style.width = 203-1 = 202px;
依次类推，所以每次div元素的宽度都在变大。
那我们怎么解决~~上面我们说了把width的属性放入到行内样式中，可以达到这个效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取样式</title>
<style>
.animation{
background-color: green;
height: 200px;
width: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="test" class="animation" style="width:200px;"></div>
</body>
<script type="text/javascript">
window.onload = function(){
var ele = document.getElementById("test"),
timer = null;
ele.onmouseover = function(){
startAnimation();
}
function startAnimation(){
clearInterval(timer);
var _ele = document.getElementById("test");
timer = setInterval(function(){
//_ele.style.width = _ele.offsetWidth -1 +‘px‘;//1 offsetWidth = width + padding + border
//onsole.log(_ele.style.width);//2 当width不写入行内style="width:200px"中的话，定义在css文件中，获取不到width
_ele.style.width = parseInt(_ele.style.width) - 1 +‘px‘;//3 offsetWidth = width + padding + border //
},100)
}
}
</script>
</html>
这样解决了，但是有一个问题，就是每个要修改的属性都要写入到行内样式中，这样很不好，
那么我们有什么办法可以获取到头样式和css的样式，而不要一定要把样式写入行内样式中呢？
IE有ele.currentStyle[attr] DOM 有 getComputedStyle(ele,false)[attr]
attr不只width ,height等，还有很多fontSize ,left ````
function getStyle(obj,attr){
if(obj.currentStyle){//IE
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
那么实现我们的功能就可以
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取样式</title>
<style>
.animation{
background-color: green;
height: 200px;
width: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="test" class="animation" ></div>
</body>
<script type="text/javascript">
window.onload = function(){
var ele = document.getElementById("test"),
timer = null;
ele.onmouseover = function(){
startAnimation();
}
function startAnimation(){
clearInterval(timer);
var _ele = document.getElementById("test");
timer = setInterval(function(){
//_ele.style.width = _ele.offsetWidth -1 +‘px‘;//1 offsetWidth = width + padding + border
//onsole.log(_ele.style.width);//2 当width不写入行内style="width:200px"中的话，定义在css文件中，获取不到width
//_ele.style.width = parseInt(_ele.style.width) - 1 +‘px‘;//3 offsetWidth = width + padding + border
_ele.style.width = parseInt(getStyle(_ele,‘width‘)) - 1 +‘px‘;//3 offsetWidth = width + padding + border
},100)
}
function getStyle(obj,attr){
if(obj.currentStyle){//IE
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
}
</script>
</html>
以上是关于js动画之获取元素属性的主要内容，如果未能解决你的问题，请参考以下文章
js进阶之js三大家族:offset,scroll,client