JS修改css样式

通过JS修改css样式

语法：元素.style.样式名=“样式值”；

注意，如果在CSS中的样式名中含有 - ；

​ 这种名称在JS中是不合法的，比如background-color；

​ 需要将这总命名改为驼峰命名法：backgroundColor

我们通过style设置的都是内联样式，

而内联样式优先级比较高，所以通过JS代码修改的样式往往会立即显现

但是如果在样式中写了！important，则此时样式会有一个最高的优先级，

​ 即使通过JS也不能覆盖样式，此时会导致JS的样式修改失效

所以尽量不要为样式添加！important

通过JS读取CSS样式

通过style设置和读取的都是内联样式

​ 语法：元素.style.样式名

获取元素当前显示的样式

​ 语法：元素.currentStyle.样式名

它可以读取当前元素正在显示的样式

​ 如果当前元素没有设置该样式，则获取它的默认值

currentStyle只有IE浏览器支持，其他浏览器都不支持

在其他浏览器中，

​ getComputedStyle()这个方法来获取元素当前的样式

​ 这个方法是window的，可以直接使用

需要两个参数

​ 参数一：要获取样式的元素

​ 参数二：可以传递一个伪元素，一般都传null

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

可以通过对象.样式名来获取样式值

如果获取的样式没有设置，则会获取到真实的值，而不是默认值

比如：没有设置width，它不会获取到auto，而会获取到实际宽度

但是这个方法不支持IE8以下的浏览器

通过currentStyle和getComputedStyle来获取到的样式都是只读的

不能修改，如果要修改必须通过style属性

clientWidth

clientHeight

​ 这两个属性可以获取元素的可见宽度可高度

​ 这些属性都是不带px的，返回的都是一个数字，可以直接进行计算

​ 会获取元素高度和宽度，包括内容区和内边距

​ 这些属性都是只读的

offsetWidth

offsetHeight

获取元素整个的大小，包括边框

offsetParent

​ 可以用来获取当前元素的定位父元素

​ 会获取到离当前元素最近的开启了定位的祖先元素

​ 如果所有祖先都没开启定位，那么就会返回body

offsetLeft

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

offsetTop

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

scrollWidth

scrollHeight

​ 可以获取元素整个滚动区域的高度和宽度

scrollLeft

​ 可以获取水平滚动条滚动的距离

scrollTop

​ 可以获取垂直滚动条滚动的距离

当满足scrollHeight-scrollTop==clientHeight

说明滚动条到底了