javascript如何設(shè)置css

這篇文章給大家分享的是有關(guān)javascript如何設(shè)置css的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

JavaScript是什么

JavaScript是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，JavaScript是被廣泛用于客戶端的腳本語言，最早是在HTML網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能。

javascript設(shè)置css的方法：1、通過內(nèi)聯(lián)樣式直接設(shè)置style對象；2、通過添加全局樣式設(shè)置style屬性；3、使用JavaScript添加和刪除類“add()”和“remove()”設(shè)置css。

本文操作環(huán)境：windows7系統(tǒng)、javascript1.8.5&&HTML5&&CSS3版、Dell G3電腦。

javascript設(shè)置css樣式

1、直接設(shè)置style對象（內(nèi)聯(lián)樣式）

使用JavaScript設(shè)置元素樣式的最簡單方法是使用style屬性。在我們通過JavaScript訪問的每個(gè)HTML元素時(shí)都有一個(gè) style對象。此對象允許我們指定CSS屬性并設(shè)置其值。例如，這是設(shè)置id 值為demo的HTML元素的字體顏色、背景顏色、的樣式：

var myElement = document.querySelector("#demo");
// 把顏色設(shè)置成紫色
elem.style.color = 'purple';  
// 將背景顏色設(shè)置為淺灰色
elem.style.backgroundColor = '#e5e5e5';  
// 將高度設(shè)置為150 px
elem.style.height = '150px';

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

該style屬性在元素上添加樣式內(nèi)聯(lián)：

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

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

2、設(shè)置style屬性--添加全局樣式

另一種方法是將<style></style>里帶有CSS屬性的元素注入DOM。將在設(shè)置應(yīng)用于一組元素而不僅僅是一個(gè)元素的樣式時(shí)，這非常有用。

首先，我們將創(chuàng)建一個(gè)樣式元素。

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

接下來，我們將通過innerHTML來給<style>添加我們的樣式。

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

最后，我們將把樣式注入DOM。為此，我們將獲取script我們在DOM中找到的第一個(gè)標(biāo)記，并用它insertBefore()來添加我們的style標(biāo)記。

// 創(chuàng)建我們的樣式表
var style = document.createElement('style');
style.innerHTML =
'.some-element {' +
'color: purple;' +
'background-color: #e5e5e5;' +
'height: 150px;' +
'}';
// 獲取第一個(gè)腳本標(biāo)記
var ref = document.querySelector('script');
// 在第一個(gè)腳本標(biāo)簽之前插入新樣式
ref.parentNode.insertBefore(style, ref);

3、使用JavaScript添加和刪除類：add()和remove()【推薦學(xué)習(xí)：javascript高級教程】

這種方法涉及添加和刪除類值，這反過來又會改變應(yīng)用的樣式規(guī)則。例如，假設(shè)我們有一個(gè)樣式規(guī)則，如下所示：

.disableMenu {
    display: none;
}

在HTML中，您有一個(gè)id為 dropDown的菜單：

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

現(xiàn)在，如果我們想將.disableMenu 樣式規(guī)則應(yīng)用于此元素中，我們需要做的就是將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完成相同的結(jié)果，我們將使用classList API。此API使得從HTML元素添加或刪除類值變得非常簡單。

要將disableMenu類名添加到我們的dropDown元素，請?jiān)贖TML元素的classList屬性上使用add()方法：

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

要刪除disableMenu類名，我們可以調(diào)用classList API的remove()方法：

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

感謝各位的閱讀！關(guān)于“javascript如何設(shè)置css”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！