使用DOM操作CSS

通过JS修改元素的样式:

• 语法:元素.style.样式名 = 样式值
• 注意:如果CSS的样式名中含有-, 这种名称在JS中是不好合法的比如:background-color,需要将这种样式名修改为驼峰命名法.去掉-,然后把减号后面的字母大写
• 通过style属性设置的样式都是内联样式,而内联样式有较高的优先级,所以通过JS修改的样式往往会立即显示
• 但是如果在样式找那个写了!important,则此时样式会有最高的优先级,即使通过JS也不能覆盖该样式,此时将会导致JS修改样式失效,所以尽量不要为样式添加!important

读取元素的样式

• 语法:元素.style.样式名
• 通过style属性设置和读取的都是内联样式，无法读取样式表中的样式

获取元素的当前显示的样式

• 语法：元素.currentStyle.样式名
• 可以读取当前元素正在显示的样式
• 如果当前元素没有设置该样式,则获取它的默认值
• currentStyle只有IE浏览器支持,其他的浏览器都不支持

getComputedStyle

• 在其他浏览器中可以使用getComputedStyle()这种方法来获取元素的样式,这个方法是window的方法可以直接使用
  • 需要两个参数
    • 第一个:要获取样式的元素
    • 第二个:可以传递一个元素,一般都传null
  • 该方法会返回一个对象,对象中封装了当前元素对应的样式
  • 可以通过对象,样式名来读取样式
  • 如果获取的样式没有设置,则会获取到真实的值,而不是默认值
  • 比如,没有设置width,他不会获取到auto,而不是一个长度
  • 但是该方法不支持IE8及以下的浏览器

通过currentStyle和getComputedStyle()读取到的样式都是只读的,不能修改,如果要修改必须通过style属性

getStyle

• 定义一个函数,用来获取指定元素的当前样式
• 参数:
  • obj 需要获取样式的元素
  • name 要获取的样式名

clienWidth和clienHeight

• 这两个属性可以获取元素的可见宽度和高度
• 这些属性都是不带px的,返回都是一个数字,可以直接进行计算
• 会获取元素的宽度和高度,包括内容区和内边距
• 这些属性都是只读的,不能改

offsetHeight和offsetWitdh

• 获取元素整个的宽度和高度,包括内容区,内边距和边框

offsetParent

• 可以用来获取当前元素的定位父元素
• 会获取到离当前元素最近的开启了定位的祖先元素
• 如果所有的祖先元素都没有开启定位,则返回body

offsetLeft和offsetTop

• offsetLeft()
• 当前元素相对于其定位父元素的水平偏移量
• offsetTop()
• 当前元素相对于其定位父元素的垂直偏移量

scrollHeight、scrollLeft、scrollTop、scrollWidth

• scrollHeight
• 可以获取元素整个滚动区域的高度
• scrollLeft
• 可以获取水平滚动条滚动的距离
• scrollTop
• 可以获取垂直滚动条滚动的距离
• scrollWidth
• 可以获取元素整个滚动区域的宽度

当满足scrollHeight - scrollTop == clientHeight时

说明垂直滚动条滚动到底了

当满足scrollWidth - scrollLeft == clientWidth时

说明水平滚动条滚动到底了

onscroll

• 改时间会在元素的滚动条滚动时触发

disable属性可以设置一个元素是否禁用

如果设置为true,则元素禁用 如果设置为false,则元素可用