《DOM编程艺术》中CSS—DOM的总结（三）

liukai90 发布于2019-08-19 18:32 / 1554人阅读

摘要：前言这是系列最后一篇，本文主要总结了的用法，以及最后对函数进行抽象。一个多说无益，还是上代码来得实在还记得编程艺术中的总结一中那个无聊的根据元素在节点树里的位置来设置样式的吧现在可以用属性直接更改样式了。

前言：这是CSS－DOM系列最后一篇，本文主要总结了className的用法，以及最后对函数进行抽象。

－－－－－－－－－－－－－－－－－－我是分割线－－－－－－－－－－－－－－－－－－－－

1.className属性

前两篇一直是用DOM直接设置或者修改CSS样式，这属于让js的“行为层”干CSS“表示层”活，试想，一旦你要再次修改由DOM脚本设置的样式，就需要在js代码中各种一通找，很麻烦并且如果代码较多的时候你或许会疯掉。
一个思考：为什么不用js直接更改元素节点的class类名选择器呢？
甚至你都不用在HTML中事先布置好这个class类名选择器，因为className属性是一个可读／可写的属性，如果元素节点事先没有定义一个class类名选择器，直接写ele.calssName ＝ "你设置的类选择器名"会直接为元素节点添加class类名选择器，从而实现更改元素节点的样式。

所以就会出现这种方案：只需要在CSS中添加一个特定的类名选择器定义样式，用js代码直接操作这个class选择器赋值给HTML中的某个节点。当想改变这个节点的样式时，不用在js代码中找寻，只需要在CSS中直接改成你想要的样式就ok了。

2.一个Demo

多说无益，还是上代码来得实在

还记得《DOM编程艺术》中CSS—DOM的总结（一）中那个无聊的“根据元素在节点树里的位置来设置样式”的Demo吧？现在可以用className属性直接更改样式了。

（1）HTML部分-没有变化

Hold the page

第一段写点什么呢？

我来讲一段故事：从前有座山，山里一个庙...

别走啊！！！最精彩的还在后面，旁边有一座尼姑庵...

还有！！！还有！！！

你听我讲，慢慢听我讲，这个故事很精彩

你可以评论我的文章，我告诉你后续故事，真的很精彩，不骗你。

（2）CSS部分－添加一个class选择器

    .intro{
        font-weight:bold;
        dont-size:20px;
    }

（3）js代码部分－对styleHeaderSiblings函数进行一些改造

此时不直接用elem.style.fontWeight更改样式，而是在遍历到每一个h1紧邻着的p标签之后，直接为其添加class属性选择器，并且把这个属性指定为第（二）步中添加的CSS样式。

function styleHeaderSiblings(){
    if(!document.getElementsByTagName){
        return false;
    }
    var headers = document.getElementsByTagName("h1");
    var elem;
    for(var i = 0; i
其他的函数都没有做改变，现在如果想再次更改样式，只需要在CSS中更改样式就OK了。
3.对函数进行抽象
再来看看styleHeaderSiblings函数，这个函数仅仅适用于h1元素，className属性值"intro"都是硬编码在函数中，所以没有通用性，所以需要对这个函数进行一些抽象，从而让它的用途更广泛。
（1）首先增加两个参数
function styleElementSiblings(tag,theclass)

第一个参数tag代表你想要替换的元素节点，本例是根据位置更换样式，特殊情况所以是h1，而不是紧跟着的p标签。
第二个参数theclass代表你想为元素节点更换的class类名选择器，本例是"intro"
抽象前：
       function styleHeaderSiblings(){
            if(!document.getElementsByTagName){
                return false;
            }
            var headers = document.getElementsByTagName("h1");
            var elem;
            for(var i = 0; i
（2）抽象出一个addClass函数
由于className属性直接就更改了class类名选择器，所以如果元素事先设置了class类名选择器，原有的样式会失效，所以需要再次抽象一个添加className的函数，取名叫addClass，有两个参数，一个是目标元素element（本例中这次是p标签），一个是值value（本例中是"intro"）
如果元素没有class属性选择器，就把value值直接赋给它
如果有，就加个空格，再给它追加一个class类选择器
抽象后
    function addClass(element,value){
        if(!element.className){
            element.calssName = value;
        }else{
            newClassName = element.className;
            newClassName = " ";
            newClassName += value;
            element.className = newClassName;
        }
    }

   function styleHeaderSiblings(tag,theclass){
        if(!document.getElementsByTagName){
            return false;
        }
        var elems = document.getElementsByTagName("tag");
        var elem;
        for(var i = 0; i
4.完整源码
老规矩了，上源码～～～欢迎留言拍砖评论交流～～～～
    
    
    
    
        
        exampl
        
    
    
    
        Hold the page
        第一段写点什么呢？
        我来讲一段故事：从前有座山，山里一个庙...
        别走啊！！！最精彩的还在后面，旁边有一座尼姑庵...
        还有！！！还有！！！
        你听我讲，慢慢听我讲，这个故事很精彩
        你可以评论我的文章，我告诉你后续故事，真的很精彩，不骗你。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79675.html

《DOM编程艺术》中CSS—DOM的总结（三）

摘要：前言这是系列最后一篇，本文主要总结了的用法，以及最后对函数进行抽象。一个多说无益，还是上代码来得实在还记得编程艺术中的总结一中那个无聊的根据元素在节点树里的位置来设置样式的吧现在可以用属性直接更改样式了。前言：这是CSS－DOM系列最后一篇，本文主要总结了className的用法，以及最后对函数进行抽象。－－－－－－－－－－－－－－－－－－我是分割线－－－－－－－－－－－－－－－－...

王岩威 2019-08-29 10:54 评论0 收藏0
《DOM编程艺术》中CSS—DOM的总结（二）

摘要：部分这是一个表格月日北京路号人民广场月日南京路号人民博物馆月日上海路号人民艺术中心部分要美观，还是稍微写点样式吧代码部分思路就是获取到所有的，然后遍历，并对做样式修改。前言：接上篇，本篇有两个内容：一个是Demo：当鼠标hover到表格的一行上时这行表格字体加粗。。。好了，废话少说，开始！！！－－－－－－－－－－－－－－－－－－严肃的分割线－－－－－－－－－－－－－－－－－－ 1....

amc 2019-08-29 10:54 评论0 收藏0
《DOM编程艺术》中CSS—DOM的总结（二）

摘要：部分这是一个表格月日北京路号人民广场月日南京路号人民博物馆月日上海路号人民艺术中心部分要美观，还是稍微写点样式吧代码部分思路就是获取到所有的，然后遍历，并对做样式修改。前言：接上篇，本篇有两个内容：一个是Demo：当鼠标hover到表格的一行上时这行表格字体加粗。。。好了，废话少说，开始！！！－－－－－－－－－－－－－－－－－－严肃的分割线－－－－－－－－－－－－－－－－－－ 1....

yangrd 2019-08-19 18:32 评论0 收藏0
《DOM编程艺术》中CSS—DOM的总结（一）

摘要：前言前面是纯总结，后面实现了一个用改变样式的。开始元素节点的属性文档中每个元素节点都有一个属性，属性包含着元素的样式，查询这个这个属性将会返回一个对象，节点对应的样式都存放在这个属性里。前言：前面是纯总结，后面实现了一个用DOM改变样式的Demo。－－－－－－－－－－－－－－－－－－－开始－－－－－－－－－－－－－－－－－－－－－－－－－ 1.元素节点的style属性 HTML文档中...

sourcenode 2019-08-29 10:54 评论0 收藏0
《DOM编程艺术》中CSS—DOM的总结（一）

摘要：前言前面是纯总结，后面实现了一个用改变样式的。开始元素节点的属性文档中每个元素节点都有一个属性，属性包含着元素的样式，查询这个这个属性将会返回一个对象，节点对应的样式都存放在这个属性里。前言：前面是纯总结，后面实现了一个用DOM改变样式的Demo。－－－－－－－－－－－－－－－－－－－开始－－－－－－－－－－－－－－－－－－－－－－－－－ 1.元素节点的style属性 HTML文档中...

Bryan 2019-08-19 18:32 评论0 收藏0