Javascript进阶笔记 - DOM操作CSS样式

DOM操作CSS样式

目录

• DOM操作CSS样式
  • 1. 操作样式
  • 2. 获取当前样式
  • 3. 其它样式相关属性

1. 操作样式

• 可以通过JS修改元素的内联样式

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

  注意：

  • 如果样式名中含有-，由于这种名称在JS中不合法，需要修改成驼峰命名法。比如background-color → backgroundColor
  • 此方法修改的是内联样式，具有较高的优先级，但如果原样式中有!important则会导致修改样式失效
  • 通过style属性设置和读取的都是内联样式，无法读取样式表中的样式

  //修改box1的背景颜色为黄色
  box1.style.backgroundColor = "yellow";
  
  //读取box1中的内联样式，如果没有内联样式则返回null
  alert(box1.style.width);
  

2. 获取当前样式

• getComputedStyle()这个方法可以获取元素当前的样式，该方法会返回一个对象，对象中封装了当前元素对应的样式。如果获取的样式没有被设置过，则会获取到其真实值，而非默认值。该方法是只读的

  语法：getComputedStyle([要获取样式的元素],[可以传递一个伪元素，一般为null])

  alert(getComputedStyle(box1,null).width);
  

3. 其它样式相关属性

• clientWidth & clientHeight

  获取元素的可见宽度和高度，括内容区和内边距

  这些属性都返回一个不带单位的数字且为只读形式，不能修改

• offsetWidth & offsetHeight

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

• offsetParent

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

  会寻找离当前元素最近的，开启了定位的祖先元素。如果所有的祖先元素都没有开启定位，则返回body

• offsetLeft & offsetTop

  获取当前元素相对于其定位父元素的水平和垂直偏移量

• scrollWidth & scrollHeight

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

• scrollLeft & scrollTop

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

• 当满足scrollHeight - scollTop == clientHeight说明垂直滚动条到底了

  当满足scrollWidth - scrollLeft == clientWidth 说明水平滚动条到底了