［筆記10］JavaScript DOM編程藝術(shù)_CSSDOM

三位一體的頁(yè)面

  • 結(jié)構(gòu)層 由HTML或XHTML之類(lèi)的標(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ì)象。

注意:

  • 類(lèi)似屬性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;
}
  • 也可以為有類(lèi)似屬性的多個(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);
    }
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案？ 參考答案 (1)瀏覽器兼容問(wèn)題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,154評(píng)論 1贊 92
  • 本篇筆記是本書(shū)的第七、八、九章內(nèi)容，前六章知識(shí)可查看JavaScript Dom編程藝術(shù)學(xué)習(xí)筆記1 第七章 動(dòng)態(tài)創(chuàng)...
    我是劉高興閱讀 465評(píng)論 1贊 2
  • 第九章 style屬性 每個(gè)元素節(jié)點(diǎn)都有一個(gè)屬性 style，這個(gè)屬性會(huì)返回一個(gè)對(duì)象，樣式都放在這個(gè)對(duì)象里面 獲取...
    小毛同學(xué)閱讀 277評(píng)論 0贊 0
  • 如果你接受我的素面朝天頭發(fā)亂糟糟臉色差長(zhǎng)痘痘又沒(méi)身材 關(guān)心我的生活知道我的習(xí)慣記得我的生日 餓了陪我當(dāng)吃貨渴了給我...
    祖宗祖宗閱讀 185評(píng)論 0贊 0
  • 最近一直處于一種焦慮的狀態(tài)，因?yàn)楹芏嗍虑槎杏X(jué)痛苦，工作的事情毫無(wú)著落，手機(jī)上的還款賬單數(shù)字大得驚人，整夜的失眠，...
    月光和魚(yú)閱讀 1,105評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容