第九章 利用DOM脚本检索，替换，设置，追加样式信息
我们浏览器里看到的网页是由以下三层信息构成的一个共同体：
-结构层，由HTML或XHTML之类的标记语言负责去搭建文档的结构。
-表示层，由CSS负责设置文档的呈现效果。
-行为层，由JavaScript和DOM去实现文档的行为。
- style属性
文档的每个元素点还都有一个属性style. 样式信息都存放在这个对象的属性里：element.style.property
我们完全可以利用style属性把这个文本段的样式信息检索出来。
- 样式信息的检索
<body>
<p id="example" style="color:grey;font-family:
'Arial',sans-serif;">
An example of a paragraph.
</p> <script type="text/javascript">
var para = document.getElementById("example");
alert("the color is " + para.style.color); //the color is grey
alert("the font-family is " + para.style.fontFamily);
</script>
</body>
注意：因为javascript会把“font-family”之间的连字符解释为减号，所以采用“Camel记号”来表示那些名字里有多个单词 的css属性。比如font-family写成 fontFamily
- style属性只能返回那些内嵌在HTML内容里的样式信息。只有把css style属性插入到HTML代码里，才可以用DOM style属性检索那些信息。
<style type="text/css">
p#example{
style="color:grey;
font-family: 'Arial',sans-serif;"
}
</style>
</head>
<body>
<p id="example">
An example of a paragraph.
</p> <script type="text/javascript">
var para = document.getElementById("example");
alert("the color is " + para.style.color);
</script>
返回结果：
DOM style属性不能用来检索在外部css文件里声明的样式信息和<head>部分声明的样式信息。
这个时候，考虑：如果用DOM来设置样式信息，就可以用DOM再把它们检索出来。
- 设置样式信息
不仅可以通过某个元素的style属性去检索信息，还可以用来设置和刷新信息。
element.style.property = value
var para = document.getElementById("example");
para.style.color = "red";
注意：style对象的属性值必须放在引号里。如果忘了，js会把等号右边的值解释为一个变量。
- 理智运用DOM脚本设置样式信息，根据元素在节点树里的位置来设置样式
CSS还无法根据元素之间的相对位置关系找出某个特定的元素来，DOM可以做到。
比如：利用DOM找出文档中的所有h1元素，然后找出跟在h1后面的那个元素并为它添加样式
function styleHeaderSiblings(){
var header = document.getElementsByTagName('h1');
for(var i=0; i<header.length; i++){
var elem = getNextElement(header[i].nextSibling);
elem.style.fontWeight = "bold";
elem.style.fontSize = "13px";
}
}
function getNextElement(node){
if (node.nodeType == 1){
return node;
}
if (node.nextSibling){
return getNextElement(node.nextSibling);
}
return null;
}
window.onload = styleHeaderSiblings;
关于上面提到的 getNextElement(node)函数，知乎有个帖子帮助理解：http://www.zhihu.com/question/36349831
- 根据某种特定条件来设置样式信息
编写一个函数来为表格画上“斑马线”
function stripeTables(){
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;
}
}
}
}
- className属性
前面的例子都是使用DOM直接设置或修改样式信息。这是让“行为层”去完成“表示层”的工作。
因此，有一种简明的解决方案：与其使用DOM脚本去直接改变某个元素的样式信息，不如通过javascript代码去刷新这个元素的class属性。
把红色标注那块变形：
在css样式表里先做样式声明：
.intro{
font-weight: bold;
font-size:13px;
}
有了这个声明，我们只需把styleHeaderSiblings()函数里紧跟在h1后面那个元素的class属性设置为intro就可以。
更简单的办法是对className属性进行刷新，这个属性可读可写，凡是元素节点都有这个属性。
注意：通过className属性和setAttribute()方法设置某个元素的class属性值将替换该元素现有的一切class设置。而不是追加。
利用字符串拼接操作把新的class设置值 追加到className属性上去：
elem.className += " intro"; //注意class名前面要留空格
第九章 利用DOM脚本检索，替换，设置，追加样式信息的更多相关文章
- 第九章 利用CSS3制作网页动画
一.CSS3变形transform 1.平移:translate(x,y) translateX(x) translateY(y) 注意:如果想只向X轴平移那么可以translateX,如果想只向X轴 ...
- javascript学习 真正理解DOM脚本编程技术背后的思路和原则
本文学习来源于<javascriptDOM编程艺术>仅作笔记 学会怎样才能利用DOM脚本编程技术以一种既方便自己更体贴用户的方式去充实和完善你们的网页. 循序渐进:从最核心的内容开始,逐步 ...
- JavaScript DOM编程艺术-学习笔记（第八章、第九章）
第八章 1.小知识点: ①某些浏览器要根据DOCTYPE 来决定页面的呈现模式(标准模式 / 怪异模式--也称兼容模式): 兼容模式意味着浏览器要模仿老一辈的浏览器的怪异行为,来让老站点得到运行,并让 ...
- 《DOM Scripting》学习笔记-——第九章 CSS-DOM
本章内容: 一.style属性 二.如何检索样式信息 三.如何改变样式 属性: 包含位置信息:parentNode , nextSibling , previousSibling , childNod ...
- 【javascript dom读书笔记】 第九章 CSS-DOM
用dom设置样式 element.style.property = value 何时用dom脚本设置样式 作者写到:绝大多数的现代浏览器,虽然对css伪类的支持不是很完整,但是对dom都有良好的支持, ...
- 第九章 基于HTTP的功能追加协议
第九章 基于HTTP的功能追加协议 通过在HTTP的基础上添加新的功能来提高性能和功能. 一.消除HTTP瓶颈的SPDY SPDY(SPeeDY)目的是提高HTTP性能,缩短Web页面的加载时间(50 ...
- 精通Web Analytics 2.0 （11） 第九章： 新兴分析—社交，移动和视频
精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第九章: 新兴分析-社交,移动和视频 网络在过去几年中发生了不可思议的发展变化:从单向对话到双向对话的转变; 由视频,Ajax和 ...
- 《Django By Example》第九章 中文 翻译 （个人学习，渣翻）
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者@ucag 注:哈哈哈,第九章终于来啦 ...
- 【机器学习实战】第14章 利用SVD简化数据
第14章 利用SVD简化数据 SVD 概述 奇异值分解(SVD, Singular Value Decomposition): 提取信息的一种方法,可以把 SVD 看成是从噪声数据中抽取相关特征.从生 ...
随机推荐
- tp5.1 手动引入外部类库
use think\facade\Env; require_once Env::get('ROOT_PATH')."extend/PHPExcel/Classes/PHPExcel.php& ...
- 给奇数的li标签添加蓝色，给偶数的li标签添加红色
今天遇到的面试题,哎,不看参考手册还是写的蛋疼啊!给奇数的li标签添加红色,给偶数的li标签添加蓝色 直接撸代码吧: <!DOCTYPE html> <html lang=" ...
- 1095 Cars on Campus（30 分
Zhejiang University has 8 campuses and a lot of gates. From each gate we can collect the in/out time ...
- js：数组里面获取键名和键值
在写php时用ajax异步传回的返回数组时是json格式,在js里面处理时有时需要用到键名,此时可以用in来处理 js只有数字索引: <script> var data = new arr ...
- LeetCode 233 Number of Digit One 某一范围内的整数包含1的数量
Given an integer n, count the total number of digit 1 appearing in all non-negative integers less th ...
- Json 解析Json
1.把LitJson导入到项目里面; 2.建一个下面的脚本,不挂在游戏对象上; 3.新建下面一个脚本,挂在相机上. using System.Collections; using System.Col ...
- Java面向对象_Object类
Object类 是类层次结构的根类,每个类都是用Object类作为超类,所有对象(包括数组)都实现这个类的方法.所有类都是Object类的子类. 下面先说两个方法toString()和equals(O ...
- arch安装软件提示包损坏
错误:lib32-libjpeg6-turbo: signature from "Colin Keenan <colinnkeenan@gmail.com>" is u ...
- Ceres Solver: 高效的非线性优化库（二）实战篇
Ceres Solver: 高效的非线性优化库(二)实战篇 接上篇: Ceres Solver: 高效的非线性优化库(一) 如何求导 Ceres Solver提供了一种自动求导的方案,上一篇我们已经看 ...
- UVALive 4262——Trip Planning——————【Tarjan 求强连通分量个数】
Road Networks Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Submit Stat ...