首页手记新手解读关于Javascript中的querySele...

新手解读关于Javascript中的querySelector、style、getComputedStyle方法

标签：

JavaScript

关于Javascript中的querySelector、style、getComputedStyle方法，我跟大家一样最熟悉的莫过于style,即（ele.style.width = ......）这样的使用，而querySelector和getComputedStyle这些方法可能就少用了（其中还有querySelectorAll）。
这些方法顶多就是初学时笔记上记过，如果没有读过jQuery或其他js库的源码那就很少看到使用这些方法了。
但这些方法都是非常酷的方法，作为新手一旦使用后就会爱不释手（别嫌字母多不好记，但功能着实强大）。

<1>
先从querySelector()和querySelectorAll()说起吧，这2个方法都是通过css选择器来选择DOM元素的，这个就跟jQuery操作DOM一样。但这2个方法他们有什么区别呢首先看一小段代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <div class="ball ball1" ></div>
    <div class="ball ball2" ></div>
    <div class="ball ball3" ></div>

    <script>
        var ball1 = document.querySelector('.ball');
        var ball2 = document.querySelectorAll('.ball');
        console.log(ball1.length);// 执行结果是undefined
        console.log(ball2.length);//执行结果是3
    </script>
</body>
</html>

可见querySelector返回的不是一个数组（length为undefined）,那么ball1是啥东西，其实就是DOM元素：<div class="ball ball1" ></div>，所以querySelector()得到的是<第一个><满足选择条件>的元素
querySelecorAll()返回的就是一个数组了，包含了<满足选择条件的>所有元素，所以对于querySelecorAll()返回的元素不能直接操作，否则就会报错，错误代码：

ball2.style.width = '300px'; //后台就大吼道老子没有找到这个属性

所以这里正确的使用——需要明确指定是数组中的哪一个元素：

ball2[0].style.width = "300px";

需要注意的另外一点就是，使用querySelectorAll()通过id来选择一个元素返回的依然是一个数组
还有querySelector()和querySelectorAll()是可以嵌套的，说嵌套可能不恰当，具体看代码

<div id="a" class="ball ball1" >
    <div class="ball ball2" ></div>
    <div class="ball ball3" ></div>
</div>
var ball3 = document.querySelector('#a').querySelectorAll('.ball');
//这里就能得到#a下面为.dall的所有元素，ball3.length == 2

前面说了这2个方法可以通过css选择器实现节点操作，那肯定不局限于id、class这样的选择啦，还支持css的属性选择：

html:
    <div class="ball ball1" alt="1233" style="margin-left: 0;"></div>
    <div id="a" class="ball ball2" style="margin-left: 0;">
        <div class="ball ball3" style="margin-left: 0; "></div>
        <div class="ball ball4" style="margin-left: 0;"></div>
    </div>
 js:
    document.querySelector('.ball[alt]');//这样也行的哦，厉害不厉害
   //这里返回的是.ball1这个元素

这个方法在IE低版本中是不支持的，目前在新版浏览器中工作完美，我主要测试的浏览器有火狐、谷歌、IE、360

<2>
关于style和getComputedStyle这两个都是为操作css样式工作的，他们最终返回的都是一个object（当然都是css键值对），而且这2个方法还都是大爷，各控制着css不同的地盘，何解，看一小段代码你就知道了：

.ball
    {
        width: 100px;
        height: 100px;
        border-radius: 50px;
        margin-top: 50px;
    }/*这是css片段*/

<div class="ball" style="margin-left: 0; "></div><!-- html标签部分 -->

var ball = document.querySelector('.ball');
console.log(ball.style.height); //这里是啥也得不到
console.log(ball.style.marginLeft);//这能返回0
getComputedStyle(ball,null).height;//返回100
getComputedStyle(ball,null).marginLeft;//返回0

这个代码说明啥呢？在获取css属性的值时，style<只能>获取到内嵌样式的值即（style="margin-left: 0; "）style属性中的css样式，这就是style的地盘。那getComputedStyle()那就不一样了简直是内外通吃，只要css样式被应用，其值就能被getComputedStyle()取到,那style岂不是小弟了嘛，不不，getComputedStyle()虽然取值功夫相当了得，但要想设置css样式，那对不起他做不到了，这就要靠style，所以这就是为什么大家会常用：

ele.style.width = ......
ele.style.opacity = .....

在代码中只要涉及css取值那么肯定少不了getComputedStyle()
当然这个在低版本IE中是另外一个方法currentStyle,新版浏览器是都支持getComputedStyle()的

那么究竟getComputedStyle()是咋用的呢？这里通俗的说一下常用的方法（我就不讲究了）

window.getComputed()//这是有点多此一举了，但这没错
一般我是这样用的
getComputedStyle(目标元素，null).css属性;
//例如
getComputedStyle(ball,null).width；
getCopmutedStyle(ball,null)['margin-top'];//这样写可以不用驼峰书写
//那究竟null这个地方是啥玩意儿呢
//如果发生这样一件事
ball::after{ ....... width: 200px;}
//如果我要获取这个伪类的width咋整？
//那就要让null这里发挥作用了
getComputedStyle(ball,'::after').width;

注意不能用于读取:hover :active等这样的伪类

点击查看更多内容