《DOM Scripting》学习笔记-——第九章 CSS-DOM
本章内容：
一、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属性。
对函数进行抽象化：把具体的值转换为这个函数的参数，使函数成为一个更通用的函数。
《DOM Scripting》学习笔记-——第九章 CSS-DOM的更多相关文章
- o'Reill的SVG精髓（第二版）学习笔记——第九章
第九章:文本 9.1 字符:在XML文档中,字符是指带有一个数字值的一个或多个字节,数字只与Unicode标准对应. 符号:符号(glyph)是指字符的视觉呈现.每个字符都可以用很多不同的符号来呈现. ...
- 《机器学习实战》学习笔记第九章 —— 决策树之CART算法
相关博文: <机器学习实战>学习笔记第三章 —— 决策树 主要内容: 一.CART算法简介 二.分类树 三.回归树 四.构建回归树 五.回归树的剪枝 六.模型树 七.树回归与标准回归的比较 ...
- 学习笔记 第九章 使用CSS美化表格
第9章 使用CSS美化表格 学习重点 正确使用表格标签: 设置表格和单元格属性: 设计表格的CSS样式. 9.1 表格的基本结构 表格由行.列.单元格3部分组成,单元格时行与列交叉的部分. 在HTM ...
- 《Python基础教程（第二版）》学习笔记 -> 第九章 魔法方法、属性和迭代器
准备工作 >>> class NewStyle(object): more_code_here >>> class OldStyle: more_code_here ...
- Head First Servlets & JSP 学习笔记 第九章 —— 使用JSTL
JSTL1.1 不是JSP2.0规范的一部分!你能访问Servlet和JSP API 不意味着你能访问JSTL! 使用JSTL之前,需要将两个文件("jstl.jar" 和 &qu ...
- Linux学习笔记(第九章)
压缩概念: gzip和zcat: 先进版bzip2,bzcat bzip -d 已压缩文档名 bzip -z 需压缩文档名 bzcat 解压文档打印到屏幕 tar:打包指令 注意:压缩最好拿掉根目录 ...
- 《metasploit渗透测试魔鬼训练营》学习笔记第九章--meterpreter
七.强大的meterpreter 7.1再探metasploit的攻击载荷模块 7.1.1典型的攻击载荷模块 metasploit涵盖了各大主流操作系统和平台,其中绝大部分是远程漏洞 ...
- JavaScript高级程序设计学习笔记第九章--客户端检测
1.能力检测:能力检测的目标不是识别特定的浏览器,而是识别浏览器的能力.(我的理解就是识别浏览器能做什么不能做什么) 2.怪癖检测:目标是识别浏览器的特殊行为.但与能力检测确认浏览器支持什么能力不同, ...
- 《DOM Scripting》学习笔记-——第二章 js语法
<Dom Scripting>学习笔记 第二章 Javascript语法 本章内容: 1.语句. 2.变量和数组. 3.运算符. 4.条件语句和循环语句. 5.函数和对象. 语句(stat ...
随机推荐
- NRF51800 空中升级DFU
下面是基础软件的安装:[抄袭他人所得] 1.安装Python软件,建议版本2.7.9及以上,不超过3.0版本[以下安装步骤需要联网]2.安装Python的pip模块,通过命令提示符进入到Python的 ...
- python之format函数
自python2.6开始,新增了一种格式化字符串的函数str.format(),可谓威力十足.那么,他跟之前的%型格式化字符串相比,有什么优越的存在呢?让我们来揭开它羞答答的面纱. 语法 它通过{}和 ...
- abstract class VS interface
关于抽象类 abstract class: 1. 抽象方法必须在抽象类中 2. 抽象类和抽象方法要用abstract 关键字修饰 3. 不可以用new 来实例化一个abstract类,因为调用抽象方法 ...
- 第二节 Python基础之变量，运算符，if语句，while和for循环语句
我们在上一节中,我们发现当我们用字符串进行一些功能处理的时候,我们都是把整个字符串写下来的,比如"jasonhy".startwith("j"),如果我们在程序 ...
- ObjectARX2012+ObjectARX Wizards2012+AutoCAD2012+MVS2008 环境配置
1 版本选择 ObjectARX本身采用的MVS编译平台,因此选择ObjectARX的编译平台作为二次开发的平台,兼容性最好,当然别的平台也不是一定不可以.目前已知的对应关系如下: R15 -- ...
- DApp demo之pet-shop
注意: 这里使用的truffle版本为4.1.4,貌似使用高版本在truffle test时候会出问题,提示 truffle/Assert.sol is not found等错误 使用Truffle ...
- 线程相关的sleep()、yield()、wait()、join()方法介绍
1.Thread.sleep()与Thread.yield()都会暂缓当前线程执行,转为执行其他线程(忽略优先级),如果持有锁,则不会释放. 2.Thread.sleep()可以精确指定休眠的时间,而 ...
- mysql5.7基于gtid主从重做
master上备份mysql/data/Percona-5721/scripts/xtra_sohmysql_fullbak.sh scp 备份文件到备机 关闭slave service mysql ...
- Unity暂停游戏功能
关于暂停游戏功能的做法,网上的教程以及Unity官方发布的Demo都是通过把Time.timeScale设成0来实现的,然而这会导致一些蛋疼的问题,因为Time.timeScale是全局变量,改成0后 ...
- Tesseract训练
最近在用Tesseract做一个图片识别的小应用,目标图像只有数字和英文字母,在实际使用过程中发现个别数识别错误,因此不得不研究学习Tesseract的训练. http://www.cnblogs.c ...