二十一，DOM操作CSS

一，DOM操作内联样式

前面我们操作DOM都是操作HTML标签，也就是在操作结构。那我们也可以通过DOM操作表现CSS样式。

通过JS修改元素的样式，语法：

元素.style.样式名 = 样式值

注意：如果CSS的样式名中含有“-”，这在JS中是不合法的比如：background-color需要将这种样式名修改为驼峰命名法。

我们通过style属性设置的样式都是内联样式，内联样式的优先级较高，所以由JS修改的样式会立即显示，但是如果在样式中写了，！important则此时样式会有最高的优先级，即使此时通过JS也不能覆盖样式，此时JS修改样式失效。

 

二，读取元素的样式

语法：元素.style.样式名

注意：JS通过style设置和读取的都是内联样式，它无法读取样式表的样式。

三，获取元素CSS样式

获取元素当前显示的样式：
   语法：

1）元素.currentStyle.样式名，那个样式生效就获取哪个元素，只有IE浏览器支持。alert(box1.currentStyle.width);

currentStyle在读取元素的width没有设置（为窗口大小）时输出的是auto

 2）在其他浏览器中使用getComputedStyle， 是windows 的方法，可以直接使用。但IE8及以下浏览器不支持。 两个参数：
                     * 1要获取元素的样式，
                     * 2可以传递一个伪元素，一般都传null

改方法会返回一个对象，对象中封装了当前元素对应的样式，

getComputedStyle()方法在读取元素的width没有设置（为窗口大小）时输出的是窗口的实际大小，会随着窗口的大小改变输出的颜色是rgb值。如果获取的样式没有设置则会获取到真实的值，而不是默认值：比如没有设置width它获取的不是auto而是一个具体的长度，

两个方法一起使用兼容IE8及以下的浏览器。

通过currentStyle和getComputedStyle()读取到的样式 都是只读的，不能修改，如果要修改必须使用style。

if……else判断也可以用三目运算来代替：

                return wind.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];

四，其他样式相关的属性

1.

 clientWidth， clientHeight 这两个属性可以获取元素的可见宽度和高度 这些属性不带单位px，返回都是一个数字，可以直接进行计算 会获取元素的宽度和高度，包括内容区和内边距，不包括边框。这些属性都是只读的，但是不能修改，修改要通过style.

2.

offsetWidth,offsetHeight获取整个元素的高度和宽度，包括内容区，内边距额边框；

offsetParent offset偏移量，返回元素的偏移容器

父元素没有开启 定位，

父元素开启定位：offsetParent 会获取到当前元素最近的开启了定位的祖先元素

* offsetLeft 当前元素相对其定位父元素的水平偏移量

* offsetTop 当前元素相对其定位父元素的垂直偏移量

没有定位祖先元素就相对于body定位。

3.

scrollHeight实际的高度，被父元素隐藏的部分也算在里面，滚动区域里面的高度

scrollLeft获取水平滚动条滚动的距离

这个在什么时候会用到呢？

在浏览器注册某个网站时，有很多霸王条款，我们可能都不仔细阅读就直接打钩了，但是它为了确保我们是浏览过的，就会设置一个垂直滚动条，要求我们必须滑动滚动条到底部，表示我们在注册时浏览过。就需要判断滚动条是否滚动到底了。

4.练习 

1)滚动条

2)事件对象