标签:javascript css-dom html-dom dom-core 网页三层架构
JavaScriptCSS-DOM是通过JavaScript去改变HTML-DOM的显示形式、即样式。如element.style.fontSize = 15em;此种形式。与CSS相比、CSS-DOM可以定时重复的执行一些样式渲染或者改变、这是CSS所不能实现的。
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; } } } }
标签:javascript css-dom html-dom dom-core 网页三层架构
原文地址:http://blog.csdn.net/crave_shy/article/details/42677923