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

標籤：按鈕   pre   selector   red   封裝   dom   操作   back   code   

看了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用法