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

头像
yangdepp
    阅读 5 分钟
    1

    前言：这是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部分-没有变化

    <h1>Hold the page</h1>
<p>第一段写点什么呢？</p>
<p>我来讲一段故事：从前有座山，山里一个庙...</p>
<p>别走啊！！！最精彩的还在后面，旁边有一座尼姑庵...</p>
<h1>还有！！！还有！！！</h1>
<p>你听我讲，慢慢听我讲，这个故事很精彩</p>
<p>你可以评论我的文章，我告诉你后续故事，真的很精彩，不骗你。</p>

    （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<headers.length; i++){
        elem = getNextElement(headers[i].nextSibling);
        elem.calssName = "intro";
    }
}

    其他的函数都没有做改变，现在如果想再次更改样式，只需要在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<headers.length; i++){
                elem = getNextElement(headers[i].nextSibling);
                elem.className = "intro";
            }
        }

    （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<elems.length; i++){
            elem = getNextElement(elems[i].nextSibling);
            addClass(elem,theclass);
        }
    }

    4.完整源码

    老规矩了，上源码～～～欢迎留言拍砖评论交流～～～～

        <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>exampl</title>
        <style>
            .intro{
                font-weight: bold;
                font-size: 20px;
            }
        </style>
    </head>
    
    <body>
        <h1>Hold the page</h1>
        <p>第一段写点什么呢？</p>
        <p>我来讲一段故事：从前有座山，山里一个庙...</p>
        <p>别走啊！！！最精彩的还在后面，旁边有一座尼姑庵...</p>
        <h1>还有！！！还有！！！</h1>
        <p>你听我讲，慢慢听我讲，这个故事很精彩</p>
        <p>你可以评论我的文章，我告诉你后续故事，真的很精彩，不骗你。</p>
    
        <!--js代码-->
        <script>
            function styleHeaderSiblings(){
                if(!document.getElementsByTagName){
                    return false;
                }
                var headers = document.getElementsByTagName("h1");
                var elem;
                for(var i = 0; i<headers.length; i++){
                    elem = getNextElement(headers[i].nextSibling);
                    addClass(elem,theclass);
                }
            }
        function addClass(element,value){
            if(!element.className){
                element.calssName = value;
            }else{
                newClassName = element.className;
                newClassName = " ";
                newClassName += value;
                element.className = newClassName;
            }
        }
    
            function getNextElement(node){
                if(node.nodeType == 1){
                    return node;
                }
                if(node.nextSibling){
                    return getNextElement(node.nextSibling);
                }
                return null;
            }
    
            function addLoadEvent(func){
                //把现有的window.onload存入变量oldonload
                var oldonload = window.onload;
                if(typeof window.onload != 'function'){
                    window.onload = func;
                }else{
                    window.onload = function(){
                        oldonload();
                        func();
                    }
                }
            }
    
            addLoadEvent(styleHeaderSiblings);
        </script>
    </body>
    
    </html>
    javascriptcss
    yangdepp
    446 声望21 粉丝

    只有那些疯狂的人才能引起我的兴趣，那些人疯狂地生活，疯狂地表达，同时对一切事物心怀渴望，他们毫无倦意，不屑于陈词滥调，只是燃烧，燃烧，燃烧。

    « 上一篇
    《DOM编程艺术》中CSS—DOM的总结（二）
    下一篇 »
    DOM事件总结（一）

    引用和评论

    推荐阅读
    头像
    补全一段jQuery代码

    yangdepp赞 3阅读 1.5k

    头像
    网页设计的垂直居中

    寒青赞 41阅读 5.2k评论 3

    头像
    CSS团队协作规范

    寒青赞 38阅读 7.4k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.3k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.5k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    0 条评论
    得票最新