JS的DOM操作——style的操作

对于JS操作文档中的元素，改变其的样式特征需要用到一个属性——style

常见操作：获取的元素点（·）style.xx(需要设置或修改的属性)

代码演示：例如修改div块的背景颜色

  <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <div class="box">
        我是box盒子
    </div>
    <script>
        var box=document.querySelector(".box")
        box.style.backgroundColor="green"
    </script>

运行结果：

 

可以看到box盒子的背景色是绿色，并不是css样式设置的红色，即通过style修改了背景色。

 注意：这里修改背景色，并不是修改了CSS中的background-color的属性值，而是在行内（标签内）进行了设置，因为行内设置属性的权重最大所以覆盖了css中设置的背景色。

通过调试器就可以看到：（F12快捷打开调试器）

 

 因此在使用style时需要注意以下几点：

获取的元素点（·）style.xx(需要设置或修改的属性 ,只能操作行内样式；

属性值只能设置为字符串；

属性必须用驼峰命名法 ，例如style.background-color就是错误的，

正确写法：style.backgroundColor；

遇到与保留字一样的样式，前面应加“css”，例如float——>element.style.cssFloat。

那我们想操作css里面的属性该怎么呢？

我只能说没有办法，但是能够获取到css里面属性的值，想要操作属性还是只能用  获取的元素点（·）style.xx(需要设置或修改的属性)

那我们想要获取css里面的属性我们又应该怎么办呢？

window对象为我们提供了一个方法——getComputedStyle(当前元素节点)，返回css样式对象，里面包含了我们在css里面设置的属性的属性值。

代码演示：我们获取一下这个对象，打印到控制台看一下

    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <div class="box">
        我是box盒子
    </div>
    <script>
        var box=document.querySelector(".box")
        var cssobj=window.getComputedStyle(box)
        console.log(cssobj);
    </script>

 控制台打印结果：

 可以看到这个对象里面包含的属性有很多，并且能够看到我们设置的background-color的属性值，rgb(255,0,0)就是红色。

既然如此，我们就可以通过这个对象点需要的属性，就可以得到对应设置的属性值：

改进代码：

    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <div class="box">
        我是box盒子
    </div>
    <script>
        var box=document.querySelector(".box")
        var cssobj=window.getComputedStyle(box)
        console.log(cssobj.width,cssobj.height,cssobj.backgroundColor);
    </script>

 控制台打印结果：

 这个window的方法，经常用于网页中模块拖动的效果的实现。

补充一点：window.getComputedStyle()不适应于IE浏览器，IE浏览器有一个它独有的方法获取css内的属性对象：element.currentStyle