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;
}
}
}
}