三位一體的頁(yè)面
- 結(jié)構(gòu)層 由HTML或XHTML之類的標(biāo)記語(yǔ)言負(fù)責(zé)創(chuàng)建。
- 表示層 由CSS負(fù)責(zé)完成，描述頁(yè)面內(nèi)容如何呈現(xiàn)。
- 行為層 負(fù)責(zé)內(nèi)容應(yīng)該如何響應(yīng)事件這一問(wèn)題。
分離
在所有的產(chǎn)品設(shè)計(jì)活動(dòng)中旺韭，選擇最使用的工具去解決問(wèn)題是最基本的原則。
使用XHTML去搭建文檔的結(jié)構(gòu)
使用CSS去設(shè)置文檔的呈現(xiàn)效果
使用DOM腳本去實(shí)現(xiàn)文檔的行為
不過(guò)三種技術(shù)之間存在著一些潛在的重疊區(qū)域掏觉。
style屬性
文檔中每個(gè)元素都是一個(gè)對(duì)象区端，每個(gè)元素的style屬性，它們也是一個(gè)對(duì)象澳腹。
注意:
- 類似屬性font-family,這個(gè)屬性的獲取方式與color屬性值略有不同织盼。在font和family之間的連詞富豪，在JS中會(huì)被解釋為減號(hào)酱塔。當(dāng)你需要引用一個(gè)中間帶減號(hào)的CSS屬性時(shí)沥邻，DOM要求你用駝峰命名法。CSS屬性font-famliy變成DOM屬性fontFamily羊娃。
- 在某些瀏覽器里唐全，color屬性會(huì)以RGB的格式顯示出來(lái)。
使用CSS速記屬性蕊玷，你可以把多個(gè)樣式組合在一起寫(xiě)成一行邮利。
內(nèi)嵌樣式
style屬性只能返回內(nèi)嵌樣式弥雹。
PS：但是內(nèi)嵌樣式將表現(xiàn)信息與結(jié)構(gòu)混雜在一起了。更好的方法是用一個(gè)外部樣式表去設(shè)置樣式近弟。設(shè)置方式如下：
<link rel="stylesheet" media="screen" href="styles/styles.css"/>
//這種方式已經(jīng)不能再用DOM style屬性檢索出來(lái)了。即使將css文件中的內(nèi)容提取出來(lái)挺智，放在head部分也不能用style屬性檢索祷愉。
DOM style屬性不能用來(lái)檢索在外部CSS文件里聲明的樣式。在外部樣式表里聲明的樣式不會(huì)進(jìn)入style對(duì)象赦颇，在文檔的<head>部分里聲明的樣式也是如此二鳄。style對(duì)象只包含在HTML代碼里用style屬性聲明的樣式。但這幾乎沒(méi)有實(shí)用價(jià)值媒怯，因?yàn)闃邮綉?yīng)該與標(biāo)記分離開(kāi)來(lái)订讼。
設(shè)置樣式
style對(duì)象的各個(gè)屬性都是可讀寫(xiě)的。不僅可以通過(guò)某個(gè)元素的style屬性去獲取樣式扇苞，還可以通過(guò)它去更新樣式欺殿。element.style.property=value
如下所示：
var para=document.getElementById("example");
para.style.color="black";
何時(shí)該用DOM腳本設(shè)置樣式
用DOM設(shè)置樣式很容易，但你能做什么事并不意味著你應(yīng)該做什么事鳖敷。在絕大多數(shù)場(chǎng)合脖苏，還是應(yīng)該使用CSS去聲明樣式。
根據(jù)元素在節(jié)點(diǎn)樹(shù)里的位置來(lái)設(shè)置樣式
- 標(biāo)簽元素
p{
font-size:1em;
}
- 為特定class屬性的所有元素統(tǒng)一聲明樣式
.fineprint{
font-size:.8em;
}
- 為有獨(dú)一無(wú)二的id屬性的元素單獨(dú)聲明樣式
#intro{
font-size:1.23m;
}
- 也可以為有類似屬性的多個(gè)元素聲明樣式
input[type*="text"]{
font-size:1.2em;
}
在現(xiàn)代瀏覽器中定踱，甚至可以根據(jù)元素的位置聲明樣式：
p:first-of-type{
font-size:2em;
font-weight:bold;
}
CSS還無(wú)法根據(jù)元素之間的相對(duì)位置關(guān)系找出某個(gè)特定的元素棍潘，但這對(duì)DOM來(lái)說(shuō)不是什么難事。
getElementByTagName方法把所有的h1元素找出來(lái)
var headers=document.getElementsByTagName("h1");
var elem;
for(var i=0;i<headers.length;i++){
elem=getNextElement(headers[i].nextSibling);
elem.style.fontWeight="bold";
elem.style.fontSize="1.2em";
}
判斷元素不是“下一個(gè)節(jié)點(diǎn)”崖媚，而是“下一個(gè)元素節(jié)點(diǎn)”亦歉。
function getNextElement(node){
if(node.nodeType==1){
return node;
}
if(node.nextSibling){
return getNextElement(node.nextSibling);
}
return null;
}
使用addLoadEvent(styleHeaderSiblings)。
根據(jù)某種條件反復(fù)設(shè)置某種樣式
例子：把表格型數(shù)據(jù)轉(zhuǎn)換為HTML內(nèi)容的理想標(biāo)簽當(dāng)然是<table>
在用CSS安排你的內(nèi)容時(shí)畅哑，千萬(wàn)不要人云亦云地認(rèn)為表格都是不好的肴楷。雖然利用表格來(lái)做頁(yè)面布局不是好主意，但利用表格來(lái)顯示表格數(shù)據(jù)卻是理所當(dāng)然荠呐。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="itinerary.css">
<body>
<table>
<caption>Itinerary</caption>
<thead>
<tr>
<th>When</th>
<th>Where</th>
</tr>
</thead>
<tbody>
<tr>
<td>June 9th</td>
<td>Portland,<abbr title="Oregon">OR</abbr></td>
</tr>
<tr>
<td>June 9th</td>
<td>Portland,<abbr title="Washington">WA</abbr></td>
</tr>
<tr>
<td>June 12th</td>
<td>Sacramento,<abbr title="California">CA</abbr></td>
</tr>
</tbody>
</table>
</body>
</html>
對(duì)應(yīng)的css文件是：
body{
font-family: "Helvetica","Arial",sans-serif;
background-color: #fff;
color: #000;
}
table{
margin: auto;
border: 1px solid #699;
}
caption{
margin: auto;
padding: .2em;
font-size: 1.2em;
font-weight: bold;
}
th{
font-weight: normal;
font-style: italic;
text-align: left;
border: 1px dotted #699;
background-color: #9cc;
color: #000;
}
th,td{
width: 10em;
padding: .5em;
}
//設(shè)置奇偶行的顏色
tr:nth-child(odd){
background-color: #ffc;
}
tr:nth-child(even){
background-color: #fff;
}
響應(yīng)事件
何時(shí)應(yīng)該使用CSS來(lái)設(shè)置樣式阶祭，何時(shí)應(yīng)該使用DOM來(lái)設(shè)置樣式并不總是那么容易決定。如果問(wèn)題涉及需要根據(jù)某個(gè)事件來(lái)改變樣式直秆，就更難做出決定了濒募。
最簡(jiǎn)單的答案是選擇最容易實(shí)現(xiàn)的方式。
CSS提供:hover等偽class屬性允許我們根據(jù)HTML元素的狀態(tài)來(lái)改變樣式圾结。DOM也可以通過(guò)onmouseover等事件對(duì)HTML元素的狀態(tài)變化做出響應(yīng)瑰剃。很難判斷何時(shí)使用:hover，何時(shí)使用onmoouseover事件筝野。那就使用最容易實(shí)現(xiàn)的方式晌姚。
決定采用純粹的CSS來(lái)解決粤剧，還是利用DOM來(lái)設(shè)置樣式。需要考慮下面的因素挥唠。
- 這個(gè)問(wèn)題最簡(jiǎn)單的解決方案是什么抵恋；
- 哪種解決方案會(huì)得到更多瀏覽器的支持。
如果想改變某個(gè)元素的呈現(xiàn)效果宝磨，使用CSS弧关；如果想改變某個(gè)元素的行為，使用DOM唤锉；如果你想根據(jù)某個(gè)元素的行為去改變它的呈現(xiàn)效果世囊，請(qǐng)運(yùn)用你的智慧，這個(gè)問(wèn)題沒(méi)有放之四海皆準(zhǔn)的答案窿祥。
className屬性
使用DOM直接設(shè)置或修改樣式株憾，這種做法讓“行為層”干“表現(xiàn)層”的活，并不是理想的工作方式晒衩。
這里有一種簡(jiǎn)明的解決方案：與其使用DOM直接改變某個(gè)元素的樣式嗤瞎，不如通過(guò)JS代碼去更新這個(gè)元素的class屬性。
PS:Get到新的知識(shí)點(diǎn)了听系。下面來(lái)從0到1的舉個(gè)例子來(lái)把這個(gè)過(guò)程說(shuō)清楚猫胁。
上面舉過(guò)一個(gè)例子，這個(gè)例子的意思是把h1下面的一個(gè)元素節(jié)點(diǎn)字體的改變跛锌。
var headers=document.getElementsByTagName("h1");
var elem;
for(var i=0;i<headers.length;i++){
elem=getNextElement(headers[i].nextSibling);
elem.style.fontWeight="bold";
elem.style.fontSize="1.2em";
}
現(xiàn)在如果你想把字體大小改成1.4em的弃秆，就必須去改上面這個(gè)函數(shù)。
但是髓帽，如果剛開(kāi)始的時(shí)候這個(gè)屬性值是寫(xiě)在css文件中的呢菠赚。
.intro{
font-weight:bold;
font-size:1.2em;
}
你只要通過(guò)setAttribute將className的屬性值更新一下，就能達(dá)到相同的效果郑藏。
elem.setAttribute("class","intro");
更簡(jiǎn)單的辦法是更新className屬性衡查。className屬性是一個(gè)可讀／可寫(xiě)的屬性，凡元素節(jié)點(diǎn)都有這個(gè)屬性必盖。
element.className=value;
最終的寫(xiě)法：
var headers=document.getElementsByTagName("h1");
var elem;
for(var i=0;i<headers.length;i++){
elem=getNextElement(headers[i].nextSibling);
elem.class="intro";
}
修改intro的樣式聲明如下：
.intro{
font-weight:bold;
font-size:1.4em;
}
這個(gè)技巧只有一個(gè)不足：通過(guò)className屬性設(shè)置某個(gè)元素的class屬性時(shí)將它替換（而不是追加）改元素原有的class設(shè)置拌牲。
如果要使用追加效果，可以利用字符串拼接操作歌粥，把新的class設(shè)置追加到className屬性上塌忽，但是需要注意的是，追加的時(shí)候失驶，前面需要加空格土居。
<p class="disclaimer">This is not a true story</p>
如在disclaimer上追加introelem.className+=" intro";
需要給一個(gè)元素追加新的class時(shí)，可以按照以下步驟操作：
- 檢查className屬性的值是否為null
- 如果是，把新的class設(shè)置值直接賦值給className屬性
- 如果不是擦耀，把一個(gè)空格和新的class設(shè)置值追加到className屬性上去棉圈。
封裝成addClass函數(shù)如下所示。
function addClass(element,value){
if(!element.className){
element.className=value;
}else{
newClassName=element.className;
newClassName+=" ";
newClassName+=value;
element.className=newClassName;
}
}
對(duì)函數(shù)進(jìn)行抽象
上面的styleHeaderSiblings函數(shù)眷蜓，只適用于h1元素分瘾，而且className也是硬編碼在里面。我們可以將它改為更通用的函數(shù)吁系。
function styleElementSiblings(tag,theclass){
if(!document.getElementByTagName)return false;
var elems=document.getElementByTagName(tag);
var elem;
for (var i = 0; i < elems.length; i++) {
elem=getNextElement(elems[i].nextSibling);
addClass(elem,theclass);
}
}
