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>