js改變css樣式的三種方法

本文轉載自查看原文 2017-03-07 13:09 52852 JavaScript

共用代碼：

<div id="div">這是一個盒子</div>

var div = document.getElementById("div");

第一種:用cssText

div.style.cssText='width:600px;height:250px;border:1px red solid;text-align: center;line-height: 250px;';

第二種：用setProperty()

 div.style.setProperty('width','700px');
 div.style.setProperty('height','300px');
 div.style.setProperty('line-height','300px');
 div.style.setProperty('background','#f00');
 div.style.setProperty('color','#fff');
 div.style.setProperty('border','1px solid blue');
 div.style.setProperty('text-align','center');

第三種：使用css屬性對應的style屬性

 div.style.width = "800px";
 div.style.height = "250px"; 
 div.style.lineHeight = "250px"; 
 div.style.background = "#000";
 div.style.color = "#fff";
 div.style.border = "1px solid #111";
 div.style.textAlign = "center";

<body>
        <div id="div">這是一個盒子</div>
        <script type="text/javascript">
            var div = document.getElementById("div");
            
            //第一種:用cssText
            div.style.cssText='width:600px;height:250px;border:1px red solid;text-align: center;line-height: 250px;';
            
            //第二種：用setProperty()
            div.style.setProperty('width','700px');
            div.style.setProperty('height','300px');
            div.style.setProperty('line-height','300px');
            div.style.setProperty('background','#f00');
            div.style.setProperty('color','#fff');
            div.style.setProperty('border','1px solid blue');
            div.style.setProperty('text-align','center');
            
            //第三種：使用css屬性對應的style屬性
            div.style.width = "800px";
            div.style.height = "250px"; 
            div.style.lineHeight = "250px"; 
            div.style.background = "#000";
            div.style.color = "#fff";
            div.style.border = "1px solid #111";
            div.style.textAlign = "center";
        </script>
    </body>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js改變css樣式的三種方法關於js修改三種css樣式的方法 css樣式導入網頁的三種方法插入css樣式表的三種方法改變this指向的三種方法 CSS 創建：格式化 HTML 文檔，插入樣式表的三種方法 JS數組去重的三種方法 js，css三種方法解決IE6下position:fixed的Bug以及閃動問題 css不定高圖文垂直居中的三種方法 js和jquery設置css樣式的幾種方法