首页 > 代码库 > JavaScript CSS-DOM
JavaScript CSS-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 = http://www.mamicode.com/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=http://www.mamicode.com/"../css/itinerary.css">>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