JavaScript CSS-DOM，javascriptcss-dom
JavaScript CSS-DOM
一：簡介
JavaScriptCSS-DOM是通過JavaScript去改變HTML-DOM的顯示形式、即樣式。如element.style.fontSize = 15em;此種形式。與CSS相比、CSS-DOM可以定時重複的執行一些樣式渲染或者改變、這是CSS所不能實現的。
二：DOM Core HTML-DOM CSS-DOM關係
DOMCore是DOM API提供的用於操作頁面元素的基礎方法、比如根據id、標籤名擷取元素標籤等
HTML-DOM同樣是JavaScript用於操作HTML元素的方法、只是方式有所不同、如document.body;element.href = value;等。
CSS-DOM是JavaScript操作頁面顯示樣式的方式、如document.style.fontSize= 11px等。
從上面看JavaScript似乎能勝任一個網頁從構造到顯示、以及動態改變網頁結構樣式的功能。是能勝任、但是並不意味著所有的事情交由JavaScript完成是一個好的選擇。
三：網頁的三層架構
結構層（structure layer）：由HTML或XHTML之類的標記語言負責建立。
展示層（presentation layer）：由CSS負責完成、其描述網頁如何顯示。
行為層（behavior layer）：負責內容應該如何相應事件、由JavaScript語言和DOM完成。
分層的思想使得分工更加明確、調理更加清晰。所以、在產品設計中、選擇最合適的工具去解決問題是最基本的原則。儘管上面提到的三層架構之間都有所滲透、如JavaScript可以操作三層任何一層、CSS的a:hover可以完成JavaScript類似功能等、在設計中還是應遵循選擇最適合的工具去解決問題原則。
四：執行個體
展現一個表格、奇偶行背景顏色不同、當滑鼠移到上面時字型變粗。
效果：
關鍵點：
為元素添加樣式：element.style.xxx = value;
為元素繫結事件：element.onmouseover = function(){};
觸發事件時改變指定元素樣式。
使用了前文中的displayAbbreviations函數。
addLoadEvent.js、displayAbbreviations.js前文中有。
itinerary.html:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Itinerary</title><link rel="stylesheet" href="../css/itinerary.css"><script src="../js/example.js"></script><script src="../js/displayAbbreviations.js"></script><script src="../js/heightLightRow.js"></script><script src="../js/addLoadEvent.js"></script></head><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 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></body></html>
itinerary.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;}/*tr:nth-child(odd) { background-color: #ffc;}tr:nth-child(even) { background-color: #fff;}*/.odd { background-color: #ffc;}
example.js:
function addClass(elems, newClassName) { if (!elems.className) { elems.className = newClassName; } else { var currentClassName = elems.className; var space = " "; elems.className = currentClassName + space + newClassName; }}/** * Enhancing stripe table function. */function useClassStripeTable() { var tableElements = document.getElementsByTagName("table"); var odd = true; for (var i = 0; i < tableElements.length; i++) { var trElements = tableElements[i].getElementsByTagName("tr"); for (var j = 0; j < trElements.length; j++ ) { if (odd) { addClass(trElements[j], "odd"); odd = false; } else { odd = true; } } }}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
