【前端】-031-DOM编程-样式操作

CSS DOM概述

通过JavaScript语言，使用DOM对象接口，动态的修改CSS内容，到达对页面样式进行变更。
整个页面的所有CSS样式还可以通过 document.styleSheets 进行获取

CSS DOM

CSS DOM操作

1. CSS的定义方式

• link外链
• style内嵌
• 元素style属性
  
  
  
  
  
  
  
  
  
  

  行内样式

  
  
  

2. 内部样式表操作

• 包括link外链和style内嵌方式
• 使用element.sheet对样式进行操作
  var element = document.getElementsByTagName(“style”); //获取元素
  element.sheet.cssRules[1]; // 第1个样式对象
  element.sheet.cssRules[1].style; //CSSStyleDeclaration对象，样式声明
  element.sheet.cssRules[1].style.lingHeight; //CSSStyleDeclaration对象中，line-height属性值，“20px”
  element.sheet.cssRules[1].selectorText; //返回选择器名称字符串，“p”
  element.sheet.cssRules[1].cssText; //第一个样式对象的内容，字符串，即“p{color: #aaa; line-height: 20px;}”

3. 行内样式表操作

   • body中的p元素
   • 使用p.style对样式直接操作
     var p = document.getElementsByTagName(“p”); //获取元素
     p.style.color; //返回 p元素css样式，属性名为color的值，字符串，“red”
     p.style.cssText; //返回p元素的css样式内容，字符串表示，即“color: red;"

4. 更新CSS样式

   • 直接更新style的对应属性值
     • p.style.color = "blue;"，
     • 缺点：
       a. 属性是需要按照驼峰格式书写，不符合CSS规范；
       b. 更新一个属性就需要一个语句，很麻烦；
   • 直接写CSS样式
     • p.style.cssText = "color: blue; border: 1px solid red"
     • 缺点：CSS样式混在JavaScript代码中，可维护性差
   • 通过更新元素样式的class值
     • 首先，在页面中增加新的样式class，例如.newClass{...}；
     • 然后，在JavaScript代码中设置元素的class样式属性，p.className += newClass;
     • 缺点：一次只能更新一个样式，如果有多个样式需要更新不方便，且要提前写到HTML代码中
   • 更新样式表方法
     • 首先，将变化后的样式（新增或删除）单独写在一个样式表文件（.css）中
     • 然后，通过变更link元素的href属性值即可完成批量样式更改操作

5. 获取CSS样式属性值

   • p.style.color获取的样式为元素行内样式，即只有在元素的style属性里设置的才能被获取，如果通过link或style方式设置的样式值无法获取
   • var style = window.getComputedStyle(p);，能获取元素的实际样式，获取的返回值为实际样式的属性名和属性值键值对 ，只能读取不能修改
     • 获取的实际为 CSSStyleDeclaration 的实例对象;
     • 此方法不支持 IE9 以下版本，IE9中需使用 element.currentStyle 来做兼容。