【js 编程艺术】小制作三

最新推荐文章于 2022-05-15 23:47:28 发布

辛苦的码农20200609

最新推荐文章于 2022-05-15 23:47:28 发布

阅读量72

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_h2i0acahaaaa.html

版权

前端专栏收录该内容

785 篇文章 4 订阅

订阅专栏

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);

辛苦的码农20200609

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【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
复制链接

扫一扫