《DOM Scripting》学习笔记-——第九章 CSS-DOM

时间：2022-04-14 08:48:13

本章内容：

一、style属性

二、如何检索样式信息

三、如何改变样式

属性：

包含位置信息：parentNode , nextSibling , previousSibling , childNodes , firstChild , lastChild

包含元素本身信息：nodeType，nodeName

包含元素样式信息：style

举例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
<title>Example</title>
<script type="text/javascript">
window.onload = function() {
var para = document.getElementById("example");
alert(typeof para.nodeName);
alert(typeof para.style);
}
</script>
</head>
<body>
<p id="example" style="color: grey; font-family:
➥ 'Arial',sans-serif;">
An example of a paragraph
</p>
</body>
</html>

第一条alert语句返回字符串“string”，表明nodeName属性（p）是一个字符串

第二条alert语句将返回字符串“object”，表明style属性是一个对象。

所以说，不仅文档里的每个元素都是一个对象，他们的style属性也是一个对象。

一、style属性

1、样式信息的检索

通过style属性检索：element.style.property

注：CSS中的连字符与js中的减法操作符相同，js会把它解释为减号。在DOM中，采用“Camel”记号来表示。例如css的background-color以及font-weight分别对应DOM中的backgroundColor及fontWeight

局限性：style属性只能返回那些内嵌在html内容里的样式信息。

2、设置样式信息

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Man bites dog</title>

</head>

<body>

<h1>Hold the front page</h1>

<p>This first paragraph leads you in.</p>

<p>Now you get the nitty-gritty of the story.</p>

<p>The most important information is delivered first.</p>

<h1>Extra! Extra!</h1>

<p>Further developments are unfolding.</p>

<p>You can read all about it here.</p>

</body>

</html>

element.style.property = value

style对象的各个属性值永远是一个字符串。所以，属性值必须放在引号里（单引号或双引号均可）。如果忘记使用引号，js将把等号右边的值解释为一个变量

二、何时该用DOM脚本去设置样式信息

1、根据元素在节点树里的位置来设置

用CSS声明样式信息的具体做法：

（1）、为同类型的所有元素统一的声明一种样式

p{ font-size：1em； }

（2）、为有特定class属性的所有元素统一声明一种样式

.fineprint{font-size:.8em;}

（3）为某个有着独一无二的id属性的元素单独声明一种样式

#intro{font-size:1.2em;}

CSS无法根据元素之间的相对位置关系找出某个特定的元素来。使用DOM方法：

function styleHeaderSiblings() {

if (!document.getElementsByTagName) return false;

var headers = document.getElementsByTagName("h1");

for (var i=0; i<headers.length; i++) {

var elem = getNextElement(headers[i].nextSibling);

elem.style.fontWeight = "bold";

elem.style.fontSize = "1.2em";

}

}

function getNextElement(node) {

if(node.nodeType == 1) {

return node;

}

if (node.nextSibling) {

return getNextElement(node.nextSibling);

}

return null;

}

h1的nextsibling只有一个，就是紧邻的第一个p

2、根据某种条件设置样式信息

Html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Cities</title>

</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>

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;

}

目的：交替改变各行数据颜色，使表格更为清晰

Js代码：

function stripeTables() {

if (!document.getElementsByTagName) return false;

var tables = document.getElementsByTagName("table");

for (var i=0; i<tables.length; i++) {

var odd = false;

var rows = tables[i].getElementsByTagName("tr");

for (var j=0; j<rows.length; j++) {

if (odd == true) {

rows[j].style.backgroundColor = "#ffc";

odd = false;

} else {

odd = true;

}

}

}

}

3、对事件作出响应

下面这个函数将在鼠标指针悬停在某个表格行的上方时，把该行文本显示为黑体字

function highlightRows() {

if(!document.getElementsByTagName) return false;

var rows = document.getElementsByTagName("tr");

for (var i=0; i<rows.length; i++) {

rows[i].onmouseover = function() {

this.style.fontWeight = "bold";

}

rows[i].onmouseout = function() {

this.style.fontWeight = "normal";

}

}

}

addLoadEvent(highlightRows);

className属性

用DOM直接设置或修改样式信息的做法并不值得推荐，因为这是让“行为层”去完成“表示层”的工作。解决方案：与其使用DOM脚本去直接改变某个元素的样式信息，不如通过js代码去刷新这个元素的class属性。

对函数进行抽象化：把具体的值转换为这个函数的参数，使函数成为一个更通用的函数。

相关文章