js获取css样式

js获取css样式

window下有一个getComputedStyle()方法
具体使用：

getComputedStyle(ele,pseudoElt).attr  
pseudoElt伪元素（可选）

发现过程

在初步学习js的时候，已经知道：

获取元素后，可以通过该元素的.style属性设置样式

但如果反过来，可以通过元素.style属性.某一样式获取该元素的样式吗？

举个例子

像这样的功能，虽然可以通过css伪类:hover实现

但如果使用鼠标事件可以完成吗？

基本结构

 <ul>
        <li><span></span><a href="">Store</a></li>
        <li><span></span><a href="">Movies</a></li>
        <li><span></span><a href="">Music</a></li>
        <li><span></span><a href="">Books</a></li>
        <li><span></span><a href="">Magazines</a></li>
        <li><span></span><a href="">Devices</a></li>
    </ul>

基本样式

 ul{
        background-color: #ddd;
    }
    li{
        width: 400px;
        height: 60px;
        list-style: none;
    }
    span{
        float: left;
        width: 60px;
        height: 60px;
    }
    a{
        text-decoration: none;
        color: #000;
        float: left;
        width: 80%;
        height: 100%;
    }

如果通过css给每一个span单独设置不同的颜色

li:nth-child(1) span{
        background-color: green;
    }
    li:nth-child(2) span{
        background-color: red;
    }
    li:nth-child(3) span{
        background-color: orange;
    }
    li:nth-child(4) span{
        background-color: blue;
    }
    li:nth-child(5) span{
        background-color: purple;
    }
    li:nth-child(6) span{
        background-color: grey;
    }

此时通过js获取元素，并尝试获取样式

var list = document.getElementsByTagName('li')
var spans = document.getElementsByTagName('span')
var alist = document.getElementsByTagName('a')

console.log(spans[0].style.backgroundColor)
console.log（spans[0].style）

此时发现，控制台居然输出了一行空！

甚至输出的style对象里的每一个样式的值都为空！！！

但如果测试，使用js为每一个span添加样式

      spans[0].style.backgroundColor ='green'
      spans[1].style.backgroundColor ='red'
      spans[2].style.backgroundColor ='orange'
      spans[3].style.backgroundColor ='blue'
      spans[4].style.backgroundColor ='purple'
      spans[5].style.backgroundColor ='grey'

再用循环给每一个span注册事件，还是能实现功能

for(var i = 0; i<spans.length; i++){
    spans[i].setAttribute('index',i)
        list[i].onmouseenter = function(){
            var bgc = this.children[0].style.backgroundColor              	     			   alist[this.children[0].getAttribute('index')].style.backgroundColor = bgc
            }
        list[i].onmouseleave = function(){
            var bgc = this.children[0].style.backgroundColor
            alist[this.children[0].getAttribute('index')].style.backgroundColor = ''
        }
    }

但事情就这么结束了吗？

并没有，为什么js获取不到css写的样式

js写的样式就能获取到了

那么一定是元素.style有问题

原来在js中，元素.style只能设置行内样式

我们已知，css书写位置有三种方式

1.行内式，在元素标签中由style属性书写，权重高，书写不方便。不经常使用

2.内嵌式，在文档head标签内，用style属性书写，普通权重，经常使用

3.外链式，在文档head标签内，用link标签引入外部css文件，普通权重，书写方便经常使用

而当我们用js元素.style只能设置行内样式，要获取css样式可以使用getComputedStyle

全局方法：具体使用规则如下：

window.getComputedStyle(ele,pseudoElt).attr
 
//ele为元素对象;
//pseudoElt为:after,:before等伪元素之类的，当都没有时就null
//attr为属性，例如：background、left;

浏览器兼容问题

return window.getComputedStyle ? window.getComputedStyle(obj,null).left : obj.currentStyle.left;
 
 
//或者
 
 
 function getElementStyle(obj,attr){
                    	if(obj.currentStyle){
                    		return obj.currentStyle[attr]
                    	}else{
                    		return getComputedStyle(obj,false)[attr]
                    	}
                    }
 
console.log(getElementStyle(div,'left'))//0px
 
//这样只需写一次就够了

本文章解决方案参考：http://t.csdn.cn/FxO1X