js知识整理(六)---DOM操作元素样式

样式的修改有三种方式:

 <style>

        .box1{
            background-color: green;
            height: 200px;
            width: 200px;
            color: hotpink;
            font-size: 20px;
        }

    </style>
<div id="div1">
        hello div 
    </div>
 <button onclick="onchangeStyle()"> 节点样式的修改 </button>


 <script>
 function onchangeStyle(){
 // 拿到节点 
   var divNode = document.getElementById("div1");
   </script>

方法一:

// 修改className 属性 对应节点的class 的类选择器 
      divNode.className = "box1";

 

方法二:

  // 通过attribute 修改class属性值 也可以
       divNode.setAttribute("class","box1");

方法三:

上面的2种方式 修改 节点的样式思路是修改 class 属性 ,第三种 通过 节点的style属性 修改样式 style会对应每个css 有属性 ,多个css 属性单词用 驼峰命名法 , 这里写法是div标签行间 引入style 样式

  divNode.style.backgroundColor = "skyblue";
  divNode.style.color = "red";
  divNode.style.fontSize = "20px";

style 属性的修改 和 className 有区别吗?

      1 style 的修改是在元素的行间添加style属性  
      2. style的修改需要改很多css 的样式 (稍微复杂)

      3.className 修改class 的属性      
      4. className修改 比 style的简单