|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 如何用JavaScript動態更改CSS類(樣式表)?要在JavaScript中更改類名,需要更改元素的className屬性。本篇文章就來介紹用JavaScript動態更改CSS(樣式表)類的代碼。
我們來直接看一個示例 創建以下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;
}說明: 單擊按鈕,就會執行以下代碼部分 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值,因此執行if語句的內部。通過分配className屬性,您可以設置元素的類。在此示例中,“importantText”設置為類名。 根據這個處理 <span id="important" class="importantText">重要</span> 改變了狀態。 運行結果 使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。
點擊“button”按鈕,則會顯示如下效果,“重要”變為紅色的字體
以上就是本篇文章的全部內容了,更多相關的精彩內容大家可以移步到php中文網的JavaScript視頻教程欄目進一步學習!!! 以上就是如何用JavaScript動態更改CSS樣式表的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!