常见CSS操作示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>document</title>
  7.     <style>
  8.         .box{
  9.             width: 100px;
  10.             height: 100px;
  11.         }
  12.         .box1{
  13.             background-color: rebeccapurple;
  14.         }
  15.     </style>
  16. </head>
  18. <body id="body">
  19.     <div id="div" class="box">
  20.         <span id="span1">span1</span>
  21.         <span id="span2">span2</span>
  22.         <span id="span3">span3</span>
  23.     </div>
  24.     <script>
  25.         var div = document.getElementById("div");
  26.         //className方式设置样式
  27.         div.className = "box box1";
  29.         //classList方式操作样式
  30.         div.classList.add("box2");                   //添加box2样式
  31.         div.classList.remove("box2");                //移除box2样式
  32.         console.log(div.classList.contains("box"));  //返回是否包含box样式
  33.         div.classList.toggle("box2");                //有就移除，没有就添加
  34.         console.log(div);
  36.         //setAttribute方式设置样式
  37.         var span1 = document.getElementById("span1");
  38.         span1.setAttribute('style','background-color:blue;' + 'boder:1px solid red;' + 'font-size:22px');
  40.         //style方式设置样式
  41.         var span2 = document.getElementById("span2");
  42.         span2.style.backgroundColor = 'red';
  43.         span2.style.border = '1px solid black';
  44.         span2.style.fontSize = '22px';
  46.         //style.cssText方式设置样式
  47.         var span3 = document.getElementById("span3");
  48.         span3.style.cssText = "background-color:yellow;" + "boder:1px solid red;" + "font-size:22px";
  49.     </script>
  50. </body>
  52. </html>

1、CSSStyleDeclaration 对象属性

属性 描述
cssText 设置或返回样式声明文本，cssText 对应的是 HTML 元素的 style 属性。
length 返回样式中包含多少条声明。
parentRule 返回包含当前规则的规则。

2、CSSStyleDeclaration 对象方法

方法 描述
getPropertyPriority() 返回指定的 CSS 属性是否设置了 “important!” 属性。
getPropertyValue() 返回指定的 CSS 属性值。
item() 通过索引方式返回 CSS 声明中的 CSS 属性名。
removeProperty() 移除 CSS 声明中的 CSS 属性。
setProperty() 在 CSS 声明块中新建或者修改 CSS 属性。