js如何設定css樣式？ js修改css樣式的方法

js如何設定css樣式？本篇文章就跟大家介紹js設定（修改）css樣式的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

下面我們就來跟大家介紹使用javascript是如果設定css樣式的。

1、直接設定樣式（內嵌樣式）

#使用JavaScript設定元素樣式的最簡單方法是使用style屬性。在我們透過JavaScript存取的每個HTML元素時都有一個 style物件。此物件允許我們指定CSS屬性並設定其值。例如，這是設定id 值為demo的HTML元素的字體顏色、背景顏色、的樣式：

var myElement = document.querySelector("#demo");

// 把颜色设置成紫色
elem.style.color = 'purple';  

// 将背景颜色设置为浅灰色
elem.style.backgroundColor = '#e5e5e5';  

// 将高度设置为150 px
elem.style.height = '150px';

註：JavaScript使用駝峰原則（例：backgroundColor）而不是短劃線（background-color）表示屬性名稱

該style屬性在元素上添加樣式內聯：

<div id="demo" style="color: purple; background-color: #e5e5e5; height: 150px;">     
     Hello, world! 
</div>

但是，這可能會使我們的標記變得非常混亂。瀏覽器渲染的效能也較差。

2、加入全域樣式

另一種方法是將裡帶有CSS屬性的元素注入DOM。將在設定應用於一組元素而不僅僅是一個元素的樣式時，這非常有用。

首先，我們將建立一個樣式元素。

var style = document.createElement('style');

接下來，我們將透過innerHTML來為