苍狼之眼

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>

  

posted on 2016-02-09 23:44  苍狼之眼  阅读(454)  评论(0编辑  收藏  举报

导航