• 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;
    			 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="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="200px;"></div>
    

      这样就可以获得到width的值

    现在我们来做一写测试,给这个div宽度缩小的代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>获取样式</title>
    	<style>
    		.animation{
    			background-color: green;
    			height: 200px;
    			 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="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;
    			 200px;
                border: 1px solid #000;
    		}
    	</style>
    </head>
    <body>
    	<div id="test" class="animation" style="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="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;
    			 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="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>
    

      

  • 相关阅读:
    Simpo
    Numpy技巧
    流程图
    注册免费试用12个月的亚马逊AWS云计算服务
    java-Collection
    CoreGraphic
    吴裕雄--天生自然python学习笔记:python 用pygame模块开发俄罗斯方块游戏
    吴裕雄--天生自然python学习笔记:python 用pygame模块检测键盘事件和鼠标事件
    吴裕雄--天生自然python学习笔记:python 用pygame模块角色类(Sprite)移动与碰撞
    吴裕雄--天生自然python学习笔记:python 用pygame模块动画一让图片动起来
  • 原文地址:https://www.cnblogs.com/kevinlifeng/p/5185801.html
Copyright © 2020-2023  润新知