CSS-DOM
9.1 style属性
语法,element.style.property
比如,获取文档的颜色:para.style.color
这里,需要注意的是,当获取如:font-family中间有-的属性时,属性名采用驼峰命名法,及para.style.fontFamily
不管CSS属性名有多少连字符,DOM一律采用驼峰命名法表示他们。
DOM 的style对象只包含在HTML代码里,用style属性声明的样式,即使样式卸载文档的<head>
部分和写在外部样式表里都不会进入style对象。
9.2 设置样式
语法:element.style.property = value
这里,value值必须包含在引号内(单引号双引号都可以)。根据以前的经验,如果没有引号,Js会认为我们是在给元素的属性赋值,这与我们的初衷完全是背道而驰的。实例:设置para元素的color属性值为black,写法应该是:para.style.color="black"
font之类的速记属性,多个值用空格间隔,例:para.style.font="2em 'Times',serif"
9.3 何时该用DOM去设置CSS样式
正如之前强调过的,可以做的并不代表它需要这么做。绝大多数场合,还是应该用CSS去声明样式,就像你不该利用DOM去创建重要的内容,也不该利用DOM去为文档设置重要的样式。不过,在使用CSS不方便的场合,还是可以用DOM对文档的样式做一些小的增强。
9.3.1 根据元素在节点树里的位置来设置样式
常用的具体做法有三种:通过标签元素(p 、a)、class属性、id属性。也可以为有类似属性的多个元素声明样式:input[type*="text"]
。现代浏览器中,可以根据元素的位置声明样式(first-of-child/last-of-child),CSS3则定义了诸如:nth-child()和nth-of-type()之类的位置选择器。
9.3.2 根据某种条件反复设置某种样式
JS特别擅长处理重复性任务。用一个for或while循环就可以轻松遍历一个很长的列表。
我们可以编写一个函数来为表格添加斑马线的效果,只需隔行设置样式即可,步骤如下:
- 找出文档里所有table元素;
- 对每个table元素,创建odd变量并赋予初始值false;
- 遍历表格里的所有行(tr);
- 如果变量odd值true,设置样式并把odd变量值改为false;
- 如果变量odd值false,不设置样式,但把odd变量值改为true。
效果图:
【JS】
function stripeTables() {
if (!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName("table");
var odd, rows;
for (var i = 0; i < tables.length; i++) {
odd = false;
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;
};
};
};
}
addLoadEvent(stripeTables);
【CSS】
body{
background-color: #fff;
}
table{
margin: 0 auto;
border: 1px solid #699;
}
caption{
color: cornflowerblue;
font-family: fantasy;
}
th{
background-color: #ddd;
}
td{
width: 100px;
}
【HTML】
<!DOCTYPE html>
<html>
<head>
<title>动态变化表格颜色</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./../styles/changetablecolor.css" />
</head>
<body>
<table>
<caption>Hellow</caption>
<tr>
<th>When</th>
<th>Where</th>
</tr>
<tr>
<td>aaa</td>
<td>vs</td>
</tr>
<tr>
<td>bbb</td>
<td>vsafs</td>
</tr>
<tr>
<td>ccc</td>
<td>vsafs</td>
</tr>
<tr>
<td>ddd</td>
<td>vsafs</td>
</tr>
</table>
<script src="./../javascripts/addLoadEvent.js"></script>
<script src="./../javascripts/changetablecolor.js"></script>
</body>
</html>
9.3.3 响应事件
只要有可能,最好用CSS为文档设置样式,话虽如此,还是有CSS不能处理或难以部署的情况,这类CSS力不从心的场合,DOM可以帮上大忙。
在9.3.2的基础上,我们希望当鼠标经过表格行的时候,这一行的字体会加粗显示,鼠标离开,字体样式恢复。这里我们用到两个鼠标事件(onmouseover和onmouseout)。
这里,只需在9.3.2中的JS代码后添加如下代码即可:
function highlight(){
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(highlight);
9.4 className 属性
上面的样式修改都是通过设置元素的style属性,然而最理想的状态是样式在CSS里修改,我们只需设置元素的className等于某个样式即可。elem.className = "intro"
在CSS里,我们去给intro这个类声明样式。
这个技巧只有一个不足,通过className属性设置某个元素的class属性时,将被替换,不能够追加。即,只能设置一个样式,如果这样elem.className = "intro disclaimer"
是无效的,虽然在CSS里我们可以用空格链接两个类,但在JS里,语法需要更改一下:elem.className += " intro"
,利用字符串拼接操作,把新的class设置值追加到className属性上去(这里,注意intro的第一个字符是空格)