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 = 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:

	
	
	
	
	
	
	


	

		
Itinerary
		

				

					
When
					
Where
				
			
			

				

					
June 9th
					
Portland, OR
				
				

					
June 10th
					
Seattle, WA
				
				

					
June 12th
					
Sacramento, CA
				
			
	

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