您好,登錄后才能下訂單哦!
小編給大家分享一下js設(shè)置css樣式的方法是什么,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
下面我們就給大家介紹使用javascript是如果設(shè)置css樣式的。
1、直接設(shè)置樣式(內(nèi)聯(lián)樣式)
使用JavaScript設(shè)置元素樣式的最簡單方法是使用style屬性。在我們通過JavaScript訪問的每個(gè)HTML元素時(shí)都有一個(gè) style對(duì)象。此對(duì)象允許我們指定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>
但是,這可能會(huì)使我們的標(biāo)記變得非?;靵y。瀏覽器渲染的性能也較差。
2、添加全局樣式
另一種方法是將<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我們?cè)贒OM中找到的第一個(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()
這種方法涉及添加和刪除類值,這反過來又會(huì)改變應(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元素,請(qǐng)?jiān)贖TML元素的classList屬性上使用add()方法:
var theDropDown = document.querySelector("#dropDown"); theDropDown.classList.add("disableMenu");
要?jiǎng)h除disableMenu類名,我們可以調(diào)用classList API的remove()方法:
var theDropDown = document.querySelector("#dropDown"); theDropDown.classList.remove("disableMenu");
看完了這篇文章,相信你對(duì)js設(shè)置css樣式的方法是什么有了一定的了解,想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。