我们浏览器里看到的网页是由以下三层信息构成的一个共同体：

-结构层，由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脚本检索，替换，设置，追加样式信息的更多相关文章

  1. 第九章 利用CSS3制作网页动画

    一.CSS3变形transform 1.平移:translate(x,y) translateX(x) translateY(y) 注意:如果想只向X轴平移那么可以translateX,如果想只向X轴 ...

  2. javascript学习 真正理解DOM脚本编程技术背后的思路和原则

    本文学习来源于<javascriptDOM编程艺术>仅作笔记 学会怎样才能利用DOM脚本编程技术以一种既方便自己更体贴用户的方式去充实和完善你们的网页. 循序渐进:从最核心的内容开始,逐步 ...

  3. JavaScript DOM编程艺术-学习笔记（第八章、第九章）

    第八章 1.小知识点: ①某些浏览器要根据DOCTYPE 来决定页面的呈现模式(标准模式 / 怪异模式--也称兼容模式): 兼容模式意味着浏览器要模仿老一辈的浏览器的怪异行为,来让老站点得到运行,并让 ...

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

    本章内容: 一.style属性 二.如何检索样式信息 三.如何改变样式 属性: 包含位置信息:parentNode , nextSibling , previousSibling , childNod ...

  5. 【javascript dom读书笔记】 第九章 CSS-DOM

    用dom设置样式 element.style.property = value 何时用dom脚本设置样式 作者写到:绝大多数的现代浏览器,虽然对css伪类的支持不是很完整,但是对dom都有良好的支持, ...

  6. 第九章 基于HTTP的功能追加协议

    第九章 基于HTTP的功能追加协议 通过在HTTP的基础上添加新的功能来提高性能和功能. 一.消除HTTP瓶颈的SPDY SPDY(SPeeDY)目的是提高HTTP性能,缩短Web页面的加载时间(50 ...

  7. 精通Web Analytics 2.0 （11） 第九章： 新兴分析—社交，移动和视频

    精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第九章: 新兴分析-社交,移动和视频 网络在过去几年中发生了不可思议的发展变化:从单向对话到双向对话的转变; 由视频,Ajax和 ...

  8. 《Django By Example》第九章 中文 翻译 （个人学习，渣翻）

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者@ucag 注:哈哈哈,第九章终于来啦 ...

  9. 【机器学习实战】第14章 利用SVD简化数据

    第14章 利用SVD简化数据 SVD 概述 奇异值分解(SVD, Singular Value Decomposition): 提取信息的一种方法,可以把 SVD 看成是从噪声数据中抽取相关特征.从生 ...

随机推荐

  1. 2017-10-3 清北刷题冲刺班a.m

    P99zhx a [问题描述]你是能看到第一题的 friends 呢.——hja怎么快速记单词呢?也许把单词分类再记单词是个不错的选择.何大爷给出了一种分单词的方法,何大爷认为两个单词是同一类的当这两 ...

  2. Cannot find the Session Identifier. Check PLUSTRACE role is enable

    解决方法: SQL> conn / as sysdbaConnected.SQL> @$ORACLE_HOME/rdbms/admin/utlxplan.sql; Table create ...

  3. 洛谷P2911 [USACO08OCT]牛骨头Bovine Bones【水题】

    题目大意:输入S1,S2,S3,随机生成三个数x,y,z,求x+y+z出现次数最多的数(如果有多个答案输出最小的),其中1<=x<=S1,1<=y<=S2,1<=z< ...

  4. 关系型数据库基础概念：MySQL系列之开篇

    一.基础概念 数据(Data)是描述事物的符号记录,是指利用物理符号记录下来的.可以鉴别的信息. 1.数据库(Database,DB)是指长期储存在计算机中的有组织的.可共享的数据集合.数据要按照一定 ...

  5. iOS获取手机型号、iOS获取当前app的名称和版本号

    NSDictionary *infoDictionary = [[NSBundle mainBundle] infoDictionary]; CFShow(infoDictionary); // ap ...

  6. 使用JMeter进行API功能测试

    使用JMeter进行API功能测试 Apache JMeter是一种流行的开源软件,用于性能测试. 在本博客中,我们将阐明如何使用JMeter for REST API自动化进行功能测试. 我们使用了 ...

  7. 点击对应的a标签返回相应的第几个

    面试中遇到的问题,前两天一直没有解决,今天想想还是得要想办法才行,其实仔细想的话很简单,惭愧啊,面试的时候没有做出来! 题目是这样的,如果一个body中有5个a标签,当我们点击对应的a标签时,aler ...

  8. 旅行青蛙分析(Android篇)

    近期旅行青蛙这款游戏非常的火热,周围的朋友.家人都养了一只小青蛙.看到网上有人说这款游戏可以直接逆向编译,没有加密:所以在搜索相关资料后花了一些时间进行逆向分析与修改.这篇文章里,我将介绍如何获取稀有 ...

  9. Codeforces 350D（计算几何）

    要点 用A.B.C一般式确定每条直线 将合法的圆心中点存到每条直线所属的vector中 枚举所有线段,二分后\(O(1)\)得到其中存在多少答案,累加 #include <cstdio> ...

  10. ACM-ICPC 2018 徐州赛区网络预赛-G Trace（线段树的应用

    Problem:Portal传送门 Problem:Portal传送门  原题目描述在最下面.  我理解的题意大概是:有n次涨潮和退潮,每次的范围是个x×y的矩形,求n次涨退潮后,潮水痕迹的长度.   ...