JS 原生 之 获取样式
1.通常使用的获取样式表的方法：element.style； 只能获取内联中得样式表；并且是可以修改；这种经常有在这里不做赘述。
2.getComputedStyle可获取指定元素所有的样式【外联， 内嵌， 内联】；
getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。【返回一个JSON数组的形式】
语法如下：
var style = window.getComputedStyle("元素", "伪类");
例子：
var dom = document.getElementById("test"),
style = window.getComputedStyle(dom , ":after");
style是一个返回的JSON数组：
例如 ： 取出 dom 里面的 宽度 可以 style['width'] 或 style.width
伪类的定义：
1.CSS术语 解释：在感觉上伪类可以是动态的，当用户和文档进行交互的时候一个元素可以获取或者失去一个伪类。例外的是":first-child"能通过文档树推断出来，":lang"在一些情况下也在从文档树中推断出来。 伪类有：:first-child ，:link:，vistited，:hover:，:active，:focus，:lang，:right，:left，:first 何为伪类?就是css内植类css内部本身赋予它一些特性和功能，也就是你不用再class=...或id=...你就可以直接拿来使用，当然你也可以改变它的部分属性比如：a:link{color:#FF0000;} CSS很多的建议并没有得到浏览器的支持，但有四个可以安全用在超链接上的伪类。 2.伪类（Pseudo classes）是选择符的螺栓，用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudo class { property: value; }，简单地用一个半角英文冒号（:）来隔开选择符和伪类。 CSS很多的建议并没有得到浏览器的支持，但有四个可以安全用在超链接上的伪类。 :link用在未访问的连接上。 :visited用在已经访问过的连接上。 :active用于获得焦点（比如，被点击）的连接上。 :hover 用于鼠标光标置于其上的连接。
①getComputedStyle的兼容性
说完常规浏览器，再来谈谈老朋友 IE ，与 getComputedStyle 对应，在 IE 中有自己特有的 currentStyle 属性，currentStyle 不支持为类型
和 getComputedStyle 方法不同的是，currentStyle 要获得属性名的话必须采用驼峰式的写法。也就是如果我需要获取 font-size 属性，那么传入的参数应该是 fontSize。因此在IE 中要获得单个属性的值，就必须将属性名转为驼峰形式。
alert((element.currentStyle? element.currentStyle : window.getComputedStyle(element, null)).height);
例子：高端手风琴特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{margin:0px auto; padding:0px;} ul { list-style: none } div { width: 1150px; height: 400px; margin: 50px auto; border: 1px solid red; overflow: hidden; } div li {width: 240px; height: 400px; float: left; } div ul { width: 1300px; } </style> </head> <body> <div id="box"> <ul> <li><img src="l1.jpg" /></li> <li><img src="l2.jpg" /></li> <li><img src="l3.jpg" /></li> <li><img src="l4.jpg"/></li> <li><img src="l5.jpg"/></li> </ul> </div> </body> <script type="text/javascript"> //找人 var box = document.getElementById("box"); var ul = box.children[0];//获取 id=box里面的第一个节点元素 也就是 ul的内容 var lis = ul.children;// 获取 ul 里面的所有节点 【数组】 //循环遍历 lis 绑定背景图 for (var i = 0; i < lis.length; i++) { //lis[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";//因为你插入图片了所以再添加背景图已经没意义了 所以这个可以省略 //给每一个li注册鼠标经过事件 鼠标经过后要排他 lis[i].onmouseover = function () { //干掉所有人 让所有人的宽度 渐渐地 变为100 for (var j = 0; j < lis.length; j++) { animate(lis[j], {"width": 100});//调用animate() 方法 } //留下我自己 让我的宽度 渐渐地 变为800 animate(this, {"width": 800});//因为添加的监听事件，所以对应的this 表示鼠标处的图片的对象 }; } //鼠标离开box 所有的li宽度 渐渐地 变为240 box.onmouseout = function () { for (var i = 0; i < lis.length; i++) { animate(lis[i], {"width": 240}); } }; //jQuery中有animate动画函数，下面是实现的原理，虽然没有jQ的强大，但是基本的效果实现还是没有问题的 function animate(obj, json) { clearInterval(obj.timer); obj.timer = setInterval(function () { //先假设 这一次执行完 所有的属性都到达目标了 var flag = true; for (var k in json) { var leader = parseInt(getStyle(obj, k)) || 0; // alert(getStyle(obj, k)); var target = json[k];//最终的宽度 var step = (target - leader) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; obj.style[k] = leader + "px";//定义宽度 //getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的祖宗八代都显示出来）； //if (leader === target) { // clearInterval(obj.timer); //} // console.log("代码还在运行"); if (leader != target) { flag = false;//告诉标记 当前这个属性还没到达 } } //如果此时仍然为true 就说明真的都到达了 if (flag) { clearInterval(obj.timer); } }, 15); } //全部属性都到达目标值才能清空 function getStyle(obj, attr) { if (window.getComputedStyle) { console.log(window.getComputedStyle(obj, null)); return window.getComputedStyle(obj, null)[attr];//本题中获取宽度 } else { return obj.currentStyle[attr]; } } </script> </html>
