JavaScript CSS-DOM

最新推荐文章于 2021-11-23 20:08:41 发布

huaying.chen

最新推荐文章于 2021-11-23 20:08:41 发布

阅读量1.7k

点赞数 2

分类专栏： Oscar_js 文章标签： javascript css-dom html-dom dom-core 网页三层架构

本文链接：https://blog.csdn.net/crave_shy/article/details/42677923

版权

Oscar_js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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