用js代碼改變css樣式,包括全局樣式與局部樣式。
一、局部改變樣式
三種方法:直接改變樣式、改變className和改變cssText
1,改變className:
復(fù)制代碼 代碼示例:
document.getElementById('obj').className="…"
2,改變cssText:
復(fù)制代碼 代碼示例:
document.getElementById('obj').style.cssText="width:20px; border:solid 1px #f00;";
3,改變直接樣式:
復(fù)制代碼 代碼示例:
document.getElementById('obj').style.backgroundColor="#003366″
二、全局改變樣式
通過改變外鏈樣式的的href的值實現(xiàn)網(wǎng)頁樣式的實時切換,即"改變模板風格"。
首先,賦予需要改變的目標一個id,例如:
復(fù)制代碼 代碼示例:
<link rel="stylesheet" type="text/css" id="css" href="firefox.css" />
調(diào)用方法:
復(fù)制代碼 代碼示例:
<span onclick="javascript:document.getElementById('css').href='ie.css'">點此改變樣式</span>
通過dom元素的settitibute方法的class值進行設(shè)置。
1. 內(nèi)聯(lián)樣式表的權(quán)值最高 1000 2. ID 選擇器的權(quán)值為 100 3. Class 類選擇器的權(quán)值為 10 4. HTML 標簽選擇器的權(quán)值為 1 CSS 優(yōu)先級法則: A 選擇器都有一個權(quán)值,權(quán)值越大越優(yōu)先 B 當權(quán)值相等時,后出現(xiàn)的樣式表設(shè)置要優(yōu)于先出現(xiàn)的樣式表設(shè)置 C 創(chuàng)作者的規(guī)則高于瀏覽者:即網(wǎng)頁編寫者設(shè)置的CSS 樣式的優(yōu)先權(quán)高于瀏覽器所設(shè)置的樣式 D 繼承的CSS 樣式不如后來指定的CSS 樣式 E 在同一組屬性設(shè)置中標有“!important”規(guī)則的優(yōu)先級最大 這是規(guī)定好的,自然不能打破
1.類選擇器(class選擇器)
基本使用:
.類選擇器{
屬性名: 屬性值;
...}
2.id選擇器
基本使用:
#id選擇器{
屬性名: 屬性值;
...
}
3. html元素選擇器
某個html元素{
屬性名: 屬性值;
...
}
4.通配符選擇器
該選擇器可以用到所有的html元素,但是其優(yōu)先權(quán)最低
*{
屬性名: 屬性值;
...
}