第九章 利用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 看成是从噪声数据中抽取相关特征.从生 ...
随机推荐
- HDU2047 阿牛的EOF牛肉串
题目:https://blog.csdn.net/qq_40932661?t=1 表面上看去似乎无从下手.但是可以从前面地推出后面的 递推: 假如涂第N个位置,有两种可能,①涂O ②不涂O. 如果涂O ...
- 关于状态压缩DP以及状态压缩
首先要明确:状态压缩是利用数字来代表一组序列的方法,从而降低序列访问的复杂度,本质上跟HASH有着差不多的思想,但是其实就是数位运算的一种 定义:集合中共有N个数字,其中每个数字均小于K,能么我们可以 ...
- centos7虚拟机安装
Centos7 第1章 CENTOS 7 简介 1.1 centos的演变 启动流程sysvinit 串行启动:一次一个, 一个一个启动 并行启动:全部的一起启动 init优点 运行非常良好.主要依赖 ...
- VSCode makedown增强插件
Markdown Preview Enhanced https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/
- Spring学习（二）Spring的bean管理（XML）
Bean的实例化方式 1.在Spring里面通过配置文件创建对象 2.bean实例化的三种方式第一种:使用类的无参数构造函数创建(最常用的方式,第2种和第3种方法一般不用) 如果类里面没有无参的构造函 ...
- Unity [Tooltip("")]
把Ad2Controller脚本挂在Ad2Ad3Manager游戏对象上,在非运行状态下把鼠标放在inspector的AdButtonObj2上就会显示广告2按钮. 如下图:
- (转)Linux硬链接、软链接及inode详解
inode 文件储存在硬盘上,硬盘的最小存储单位叫做“扇区”(Sector).每个扇区储存512字节(相当于0.5KB). 操作系统读取硬盘的时候,不会一个个扇区地读取,这样效率太低,而是一次性连续读 ...
- 让我们把KBEngine玩坏吧！如何定制我们自己的C++函数（一）
为什么不更新kbe warring的代码解读了,因为在我看来那个demo讲完了实体就没东西可讲了,如果专心的看官方文档和PPT的话demo的代码后面没任何难点了已经,单纯的复制黏贴代码实在太过无聊.程 ...
- JavaSE之Java基础（5）
21.简述正则表达式及其用途. 在编写处理字符串的程序时,经常会有查找符合某些复杂规则的字符串的需要.正则表达式就是用于描述这些规则的工具.换句话说,正则表达式就是记录文本规则的代码. 22.Java ...
- 使用SpringSession管理分布式系统的会话Session
在我方供应链项目分布式部署的环境下,需要在统一网关服务中管理访问的Session,即无论访问请求路由到哪一个网关服务环境,使用的都是相同的HttpSession,这样就保证了在用户登录之后,能够使用统 ...