javascript dom編程藝術學習筆記之CSS-DOM

javascript dom編程藝術學習筆記之CSS-DOM

@(JavaScript)[學習筆記]

---

[TOC]

---

1.三位一體的網頁

網頁由如下三層信息構成一個共同體

• 結構層
• 表示層
• 行爲層 結構層 有HTML或XHTML之類的標記語言建立 表示層 由CSS完成。描述頁面如何呈現 行爲層 負責內容如何響應事件這一問題，由javascript和DOM構成 分離 三種技術之間有潛在重疊的區域。例如能夠用dom建立標記 css利用僞類走進DOM領地

2.stytle屬性

每一個元素節點都有一個屬性stytle。stytle屬性包含着元素的樣式，查詢這個對象將返回一個對象而不是一個字符串。

element.stytle.property

2.1 獲取樣式

element.stytle.color獲取對象的color屬性 font-family不能這樣獲取，由於鏈接字符與減法操做符相同，javascript會解釋爲減法 DOM要求使用駝峯命名法來命名中間帶有減號的CSS屬性 例如：element.stytle.fontFamily DOM表示樣式屬性採用的單位並不老是和CSS樣表設置的相同 例如：把color的屬性值改成#999999，在某些瀏覽器中會以rgb的方式返回 CSS速記屬性能夠把多個樣式組合一塊兒寫成一行font: 12px 'Arial' , sans-serif; DOM能解析這樣的速記 stytle屬性只能返回內嵌樣式不符合平穩退化原則 有另外一種狀況可讓stytle屬性正確反射咱們設置的樣式

2.2 設置樣式

許多屬性是隻讀的，stytle對象的各個屬性就是讀寫的 能夠給屬性賦值para.stytle.font = "2em 'Tiems' ,serif"

3. 什麼時候用DOM腳本設置樣式

3.1 根據元素在節點樹的位置來設置樣式

CSS沒法根據元素的相對位置關係找出某個特定的元素，DOM能夠作到

function styleHeaderSiblings() {
  if (!document.getElementsByTagName) return false;
  var headers = document.getElementsByTagName("h1");
  for (var i=0; i<headers.length; i++) {
    var elem = getNextElement(headers[i].nextSibling);
    addClass(elem,"intro");
  }
  function getNextElement(node) {
  if(node.nodeType == 1) {
	return node;
  }
  if (node.nextSibling) {
    return getNextElement(node.nextSibling);
  }
  return null;
}
addLoadEvent(styleHeaderSiblings);

理論上講應該用類樣式來設置。若是內容須要按期編輯和刷新，添加class就成爲一種負擔

3.2 根據某種條件反覆設置某種樣式

標記語言

<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 10th</td>
      <td>Seattle, <abbr title="Washington">WA</abbr></td>
    </tr>
    <tr>
      <td>June 12th</td>
      <td>Sacramento, <abbr title="California">CA</abbr></td>
    </tr>
    </tbody>
  </table>

若支持CSS3，很簡單兩行就能夠設置成功 能夠用javascript編寫函數設置斑馬線效果，只須要隔行設置樣式就ok

• 找出文檔中全部table元素
• 對每一個table元素，建立odd變量把它初始化爲false
• 遍歷表格的全部數據行
• 若是變量odd的值是true，設置樣式並把odd變量修改成false
• 若是變量odd的值是false，不設置樣式，把odd變量修改成true

function stripeTables() {
  if (!document.getElementsByTagName) return false;
  var tables = document.getElementsByTagName("table");
  for (var i=0; i<tables.length; i++) {
    var odd = false;
    var rows = tables[i].getElementsByTagName("tr");
    for (var j=0; j<rows.length; j++) {
      if (odd == true) {
        rows[j].stytle.backgroundColor = '#ffc';
        odd = false;
      } else {
        odd = true;
      }
    }
  }
}

有一個問題，table每一行都被設置爲false，如何交替？

3.3 響應事件

CSS提供僞類根據元素狀態改變樣式，DOM也能夠經過onmouseover等事件對html響應。 很難判斷使用那個 若是隻是想讓連接在鼠標指針懸停改變顏色，能夠用CSS 若是鼠標懸停加粗，部分瀏覽器能夠用CSS加粗，DOM卻均可以獲得公平對待

function highlightRows() {
  if(!document.getElementsByTagName) return false;
  var rows = document.getElementsByTagName("tr");
  for (var i=0; i<rows.length; i++) {
    rows[i].onmouseover = function() {
      this.style.fontWeight = "bold";
    }
    rows[i].onmouseout = function() {
      this.style.fontWeight = "normal";
    }
  }
}
addLoadEvent(highlightRows);

考慮使用CSS仍是DOM

• 這個問題最簡單的解決方案是什麼
• 哪一種解決方案獲得更多瀏覽器支持

4. className屬性

與其使用DOM更改樣式，不如使用javascript更新元素的屬性

function styleHeaderSiblings() {
  if (!document.getElementsByTagName) return false;
  var headers = document.getElementsByTagName("h1");
  for (var i=0; i<headers.length; i++) {
    var elem = getNextElement(headers[i].nextSibling);
    elem.stytle.fontWeight = "bold";
    elem.stytle.fontSize = "1.2em";
  }
}

若是修改CSS的字號，就不得不去改這個函數 若是引用一個外部樣式表，針對.intro類樣式聲明 你只須要把緊跟一級標題後的元素設置爲intro就能夠達到目的。 能夠用setAttribute方法來作這件事

elem.setAttribute("class", "intro");

更簡單的方法是更新className屬性

function styleHeaderSiblings() {
  if (!document.getElementsByTagName) return false;
  var headers = document.getElementsByTagName("h1");
  for (var i=0; i<headers.length; i++) {
    var elem = getNextElement(headers[i].nextSibling);
	**elem.className = "intro";**
  }
}

這個技巧有個不足，className會把原來的屬性替換掉，而不是追加原有的class設置 咱們須要追加效果elem.className += " intro"; 操做步驟以下：

• 檢查className屬性值是否爲null
• 若是是，把新的class直接賦值給className
• 若是不是，把一個空格和新的值追加到className屬性上

function addClass(element,value) {
  if (!element.className) {
    element.className = value;
  } else {
    element.className+= " ";
    element.className+= value;
  }
}

5. 對函數進行抽象

把一個很是具體的東西改進爲一個較爲通用的東西叫抽象 stytleHeaderSiblings函數中，能夠傳遞給兩個形參，tag和theClass 這樣會很通用