您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)用JavaScript動(dòng)態(tài)更改CSS樣式表的方法的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。
如何用JavaScript動(dòng)態(tài)更改CSS類(樣式表)?要在JavaScript中更改類名,需要更改元素的className屬性。
我們來(lái)直接看一個(gè)示例
創(chuàng)建以下HTML文件。
JavaScriptChangeCssClass.html
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> function buttonClick() { target = document.getElementById("important"); if (target != null) { target.className = "importantText"; } } </script> <link rel="stylesheet" type="text/css" href="JavaScriptChangeCssClass.css"/> </head> <body> <p>這篇文章是很<span id="important">重要</span>的,需要特別注意。</p> <input id="Button1" type="button" value="button" onclick="buttonClick();"/> </body> </html>
JavaScriptChangeCssClass.css
.importantText{ font-weight:700; color:#FF0000; }
說(shuō)明:
單擊按鈕,就會(huì)執(zhí)行以下代碼部分
function buttonClick() { target = document.getElementById("important"); if (target != null) { target.className = "importantText"; } }
target = document.getElementById("important");
因此,ID獲得important的元素。在這種情況下,你可以獲得“<span id =”important“>重要</ span>”的元素。
if (target != null) { target.className = "importantText"; }
如果可以獲取元素,則它是非null值,因此執(zhí)行if語(yǔ)句的內(nèi)部。通過(guò)分配className屬性,您可以設(shè)置元素的類。在此示例中,“importantText”設(shè)置為類名。
根據(jù)這個(gè)處理
<span id="important" class="importantText">重要</span>
改變了狀態(tài)。
運(yùn)行結(jié)果
使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。
點(diǎn)擊“button”按鈕,則會(huì)顯示如下效果,“重要”變?yōu)榧t色的字體
感謝各位的閱讀!關(guān)于用JavaScript動(dòng)態(tài)更改CSS樣式表的方法就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。