• 【js 编程艺术】小制作三


    1.html文件

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Man bites dog</title>
        <link rel="stylesheet" type="text/css" href="styles/story.css">
    </head>
    <body>
        <h1>Hold the front page</h1>
        <p>This first paragraph leads you in.</p>
        <p>Now you get the nitty-gritty of the story.</p>
        <p>The most important information is delivered first.</p>
        <h1>Extra! Extral!</h1>
        <p>Further developemnts are it here.</p>
        <p>You can read all about it here.</p>
    
        <script type="text/javascript" src="scripts/styleHeaderSiblings.js"></script>
    </body>
    </html>

    2.css代码

    .intro{
        font-weight: bold;
        font-size: 1.2em;
    }

    3.js代码

    function addLoadEvent(func) {
        var oldonload = window.onload;
        if(typeof window.onload != "function"){
            window.onload = func;
        }else{
            window.onload = function(){
                oldonload();
                func();
            }
        }
    }
    
    
    function getNextElement(node){
        if(node.nodeType == 1){
            return node;
        }
        if(node.nextSibling){
            return getNextElement(node.nextSibling);
        }
        return null;
    }
    
    function addClass(element, value){
        if(!element.className){
            element.className = value;
        }else{
            var newClassName = element.className;
            newClassName += " ";
            newClassName += value;
            element.className = newClassName;
        }
    }
    
    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, "intro");
        }
    }
    
    addLoadEvent(styleHeaderSiblings);
  • 相关阅读:
    Vagrant安装virtualbox
    SQLSERVER排查CPU占用高的情况
    删除重复记录,只留一条
    ASCII码对应表chr(9)、chr(10)、chr(13)、chr(32)、chr(34)、chr(39)、……
    手机和PC端的录屏软件
    2017年初面试总结
    Python面向对象
    Python字体颜色
    Python第二模块总结
    Fiddler使用教程(转)
  • 原文地址:https://www.cnblogs.com/libra-yong/p/6323676.html
Copyright © 2020-2023  润新知