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>
手风琴特效
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
