首先我们要介绍一些知识

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动画之获取元素属性的更多相关文章

  1. JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）

    JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...

  2. JS中获取元素属性的逆天大法

    给大家聊下js中获取元素属性的逆天大法,胆小慎入,切记切记!!! innerHTML.outerHTML.innerText .outerText.value.text().html(),val() ...

  3. JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器

    今天学习了jQ,jQ对js的帮助很大,菜鸟教程上也有属性.可以查看 js 和 jquery主要的区别 在 dom    想用jquery  必须先引入(顺序问题)        先css 再js:   ...

  4. 原生JS与JQ获取元素的区别

    刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...

  5. UI自动化之特殊处理四（获取元素属性\爬取页面源码\常用断言）

    获取元素属性\爬取页面源码\常用断言,最终目的都是为了验证我们实际结果是否等于预期结果 目录 1.获取元素属性 2.爬取页面源码 3.常用断言 1.获取元素属性 获取title:driver.titl ...

  6. appium+python自动化：获取元素属性get_attribute

    使用get_attribute()获取元素属性,括号里应该填写什么? 查看appium源码 如果是获取resource-id,填写resourceId self.driver.find_element ...

  7. JS获取元素属性

    <style> *{ box-sizing: border-box; } html, body { margin: 0px; width: 100%; height: 100%; over ...

  8. JS获取元素属性和自定义属性

    获取元素的属性分为两种类型: 1-获取元素常见的属性(class,id,type,value……) 2-获取自定义的元素的属性(data-value,data-mess…….) 获取元素的属性,设置元 ...

  9. js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140 ...

随机推荐

  1. c++并发练习---多线程顺序打印

    参考:http://blog.csdn.net/liuxuejiang158blog/article/details/22061267 题目:编写一个程序,开启3个线程,这3个线程的ID分别为A.B. ...

  2. 浅析word-break work-wrap区别

    word-break:[断词] 定义:规定自动换行的处理方法.   注:通过word-break使用,可以实现让浏览器在任意位置换行. 语法:word-break: normal|break-all| ...

  3. [记录][python]python爬虫，下载某图片网站的所有图集

    随笔仅用于学习交流,转载时请注明出处,http://www.cnblogs.com/CaDevil/p/5958770.html 该随笔是记录我的第一个python程序,一个爬去指定图片站点的所有图集 ...

  4. 解决iphone5s,iphone6不能使用luajit及luac的问题

    做手游有小段时间了,感觉坤哥给这么多的机会.一直都比较忙项目的事,比较没时间去写点东西做点记录.想想还是写点开发问题记录比较好,可以很简短,也可以很有用. 我们项目采用的cocos2d-x的引擎,之前 ...

  5. （转）pymysql 连接mysql数据库---不支持中文解决

    往数据库里插入中文时出现异常:UnicodeEncodeError: 'latin-1' codec can't encode characters 就是编码的问题,pymysql默认的编码是lati ...

  6. A*算法 -- 八数码问题和传教士过河问题的代码实现

    前段时间人工智能的课介绍到A*算法,于是便去了解了一下,然后试着用这个算法去解决经典的八数码问题,一开始写用了挺久时间的,后来试着把算法的框架抽离出来,编写成一个通用的算法模板,这样子如果以后需要用到 ...

  7. unity自带寻路Navmesh入门教程（一）

    说明:从今天开始,我阿赵打算写一些简单的教程,方便自己日后回顾,或者方便刚入门的朋友学习.水平有限请勿见怪.不过请尊重码字截图录屏的劳动,如需转载请先告诉我.谢谢! unity自从3.5版本之后,增加 ...

  8. NSURLErrorDomain -999 "Canceled" 错误探究

    完整错误描述为 Error Domain=NSURLErrorDomain Code=-999 "Canceled/已取消" 这个错误一般用来描述某个网络请求在还未被发出时就被意外 ...

  9. underscore源码解析 (转载)

    转载出自http://www.cnblogs.com/human/p/3273616.html (function() { // 创建一个全局对象, 在浏览器中表示为window对象, 在Node.j ...

  10. webStorage和cookie的区别

    共同点:         都是保存在浏览器端,且同源的   cookie有什么缺点? Cookie数量和长度的限制.每个domain最多只能有20条cookie,每个cookie长度不能超过4KB 安 ...