看了js也有一段時間了，對於修改css樣式有很多種方式可以實現，今天做一個小小的總結吧。

首先寫個例子

body部分

<div class="box"></div>
<inpiut id-"btn" type="button" value="按鈕">

style部分

.box{
    width: 100px;
    height: 100px;
    background: red;
    border: 1px solid blue;
}

基本的內容寫好了，那麽我們如何改變呢？

方法一：簡單粗暴直接(屬性修改)

<script>
      var
 
 btn = document.getElementById(‘btn‘);
      var box = document.querySelector(‘.box‘);

      box.onclick = function(){
      box.style.width = "200px";
      box.style.height = "200px";
      box.style.height = "pink";
} 
</script>    

方法二 ： cssText

<script>
    var btn = document.getElementById(
 
‘btn‘);
    var box = document.querySelector(‘.box‘);
    
    btn.onclick=function(){
    box.style.cssText = "width:200px;height:200px;background:pink";
    };
</script>

方法三： dom操作 setAttrbute

btn.onclick=function(){
            box.setAttribute("style","width:200px; height:200px; background:pink");
}
 

基本上是這種三種，但是如果想要優雅一些。

就直接封裝函數吧

<script>
      var btn = document.getElementById(‘btn‘);
      var box = document.querySelector(‘.box‘);

      box.onclick = setStyle;

      function setStyle(){  

//方法1:
      box.style.width = "200px";
      box.style.height = "200px";
      box.style.height = "pink";   
//方法2:
     box.style.cssText = "width:200px; height:200px; background:pink;";
//方法3:
　　 box.setAttrbute(‘style‘,"width:200px; height:200px; background:pink")
}
</script>            

關於修改css樣式的幾種js用法