javascript怎麼設定css

javascript設定css的方法：1、透過內嵌樣式直接設定style物件；2、透過新增全域樣式設定style屬性；3、使用JavaScript新增和刪除類別「add()」和「remove( )”設定css。

本文操作環境：windows7系統、javascript1.8.5&&HTML5&&CSS3版、Dell G3電腦。

javascript設定css樣式

1、直接設定style物件（內聯樣式）

使用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、設定style屬性--新增全域樣式

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

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

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

接下來，我們將透過innerHTML來為c9ccee2e6ea535a969eb3f532ad9fe89添加我們的樣式。

var style = document.createElement('style');
style.innerHTML =
'.some-element {' +
'color: purple;' +
'background-color: #e5e5e5;' +
'height: 150px;' +
'}';

最後，我們將把樣式註入DOM。為此，我們將取得script我們在DOM中找到的第一個標記，並用它insertBefore()來加入我們的style標記。

// 创建我们的样式表
var style = document.createElement('style');
style.innerHTML =
'.some-element {' +
'color: purple;' +
'background-color: #e5e5e5;' +
'height: 150px;' +
'}';
// 获取第一个脚本标记
var ref = document.querySelector('script');
// 在第一个脚本标签之前插入新样式
ref.parentNode.insertBefore(style, ref);

3、使用JavaScript新增和刪除類別：add()和remove()【推薦學習：javascript高階教學】

這種方法涉及新增和刪除類別值，這反過來又會改變應用程式的樣式規則。例如，假設我們有一個樣式規則，如下所示：

.disableMenu {
    display: none;
}

在HTML中，您有一個id為dropDown的選單：

<ul id="dropDown">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

現在，如果我們想將.disableMenu 樣式規則應用於此元素中，我們需要做的就是將disableMenu作為類別值新增至dropDown元素：

<ul class="disableMenu" id="dropDown">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

要使用JavaScript完成相同的結果，我們將使用classList API。此API使得從HTML元素新增或刪除類別值變得非常簡單。

要將disableMenu類別名稱加入我們的dropDown元素，請在HTML元素的classList屬性上使用add()方法：

var theDropDown = document.querySelector("#dropDown");
theDropDown.classList.add("disableMenu");

要刪除disableMenu類別名，我們可以呼叫classList API的remove()方法：

var theDropDown = document.querySelector("#dropDown");
theDropDown.classList.remove("disableMenu");

以上是javascript怎麼設定css的詳細內容。更多資訊請關注PHP中文網其他相關文章！