JavaScript 拾碎[三] 使用className屬性
網(wǎng)頁(yè)的結(jié)構(gòu)層(Structure )由HTML 或XHTML 創(chuàng)建;
網(wǎng)頁(yè)的表現(xiàn)層(Presentation )由CSS 來(lái)創(chuàng)建;
網(wǎng)頁(yè)的行為層(Behavior )由Javascript 和DOM 所完成;
其實(shí),網(wǎng)頁(yè)的表現(xiàn)層和行為層總是存在的,即使用戶(hù)沒(méi)有去定義。因?yàn)閃eb 瀏覽器會(huì)把自身默認(rèn)的樣式和事件加載到網(wǎng)頁(yè)的結(jié)構(gòu)層上。
B 使用className 屬性
Javascript 還可以通過(guò)className 屬性靈活的更改一個(gè)標(biāo)簽元素的CSS 類(lèi)選擇器來(lái)實(shí)現(xiàn)樣式的變化。
代碼示例:
<html>
<head>
<title>追加CSS類(lèi)別</title>
<style type="text/css">
.myUL1{
color:#0000FF;
font-family:Arial;
font-weight:bold;
}
.myUL2{
text-decoration:underline;
}
</style>
<script language="javascript">
function check(){
var oMy = document.getElementsByTagName("ul")[0];
oMy.className += " myUL2"; //追加CSS類(lèi),注意" myUL2"前面的空格.
}
</script>
</head>
<body>
<ul onclick="check()" class="myUL1">
<li>HTML</li>
<li>JavaScript</li>
<li>CSS</li>
</ul>
</body>
</html>
運(yùn)行時(shí),單擊列表后,實(shí)際上<ul> 的class 屬性變?yōu)椋?
<ul onclick="check()" class="myUL1 myUL2">
注意:
i > 如果是直接修改className 屬性值,則是對(duì)CSS 進(jìn)行替換;
ii > 但以上代碼不是將原有的CSS 樣式覆蓋,而是對(duì)現(xiàn)有CSS 樣式進(jìn)行追加。
追加的前提是:保證追加的CSS 與原先的CSS 不重復(fù);
經(jīng)驗(yàn):
瀏覽器之間顯示的差異,通常都是因?yàn)楦鱾€(gè)瀏覽器本身對(duì)CSS 屬性的默認(rèn)值不同所導(dǎo)致的。
通常的解決辦法是:程序員自己指定該值,而不讓瀏覽器使用其默認(rèn)值即可。
相關(guān)文章
Javascript實(shí)現(xiàn)返回上一頁(yè)面并刷新的小例子
這篇文章主要介紹了Javascript實(shí)現(xiàn)返回上一頁(yè)面并刷新的小例子,有需要的朋友可以參考一下2013-12-12通過(guò)隱藏iframe實(shí)現(xiàn)文件下載的js方法介紹
本篇文章主要是對(duì)通過(guò)隱藏iframe實(shí)現(xiàn)文件下載的js方法進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02Three.JS實(shí)現(xiàn)三維場(chǎng)景
這篇文章主要為大家詳細(xì)介紹了Three.JS實(shí)現(xiàn)三維場(chǎng)景,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12Javascript實(shí)現(xiàn)購(gòu)物車(chē)功能的詳細(xì)代碼
這篇文章使用js實(shí)現(xiàn)購(gòu)物車(chē)的價(jià)格計(jì)算,商品數(shù)量更換,商品刪除等功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-05-05JS中的常見(jiàn)數(shù)組遍歷案例詳解(forEach,?map,?filter,?sort,?reduce,?ever
這篇文章主要介紹了JS中的常見(jiàn)數(shù)組遍歷方法詳解(forEach,?map,?filter,?sort,?reduce,?every),本篇講用實(shí)際案例詳解他們的語(yǔ)法和用法,需要的朋友可以參考下2023-05-05TypeScript中d.ts類(lèi)型聲明文件的實(shí)現(xiàn)
.d.ts 文件是 TypeScript 的類(lèi)型聲明文件,它們的主要作用是為 JavaScript 庫(kù)提供類(lèi)型支持,本文主要介紹了TypeScript中d.ts類(lèi)型聲明文件的實(shí)現(xiàn),感興趣的可以了解一下2023-10-10Javascript實(shí)現(xiàn)商品秒殺倒計(jì)時(shí)(時(shí)間與服務(wù)器時(shí)間同步)
在一些購(gòu)物商城經(jīng)常看到有很多商品做秒殺活動(dòng),也就是倒計(jì)時(shí),本篇文章給大家介紹Javascript實(shí)現(xiàn)商品秒殺倒計(jì)時(shí)(時(shí)間與服務(wù)器時(shí)間同步),需要的朋友可以了解下2015-09-09