JavaScript_DOM编程艺术第二版学习笔记-第9章

最新推荐文章于 2021-04-06 15:46:04 发布

香雪儿sofia

最新推荐文章于 2021-04-06 15:46:04 发布

阅读量1k

点赞数 1

分类专栏： JavaScript+DOM编程文章标签： javascript html css 编程 dom

本文链接：https://blog.csdn.net/sofia92/article/details/50402665

版权

JavaScript+DOM编程专栏收录该内容

8 篇文章 1 订阅

订阅专栏

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的第一个字符是空格）

香雪儿sofia

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
JavaScript_DOM编程艺术第二版学习笔记-第9章

CSS-DOM9.1 style属性语法，element.style.property比如，获取文档的颜色：para.style.color这里，需要注意的是，当获取如：font-family中间有-的属性时，属性名采用驼峰命名法，及para.style.fontFamily不管CSS属性名有多少连字符，DOM一律采用驼峰命名法表示他们。 DOM 的style对象只包含在HTML代码里，用styl
复制链接

扫一扫