DOM Scripting 学习九-story

最新推荐文章于 2024-07-25 22:24:14 发布

Darcyyyy

最新推荐文章于 2024-07-25 22:24:14 发布

阅读量63

点赞数

分类专栏：前端文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/Darcyyyy/article/details/126115880

版权

JavaScript DOM操作页面加载 CSS样式类名添加

关键词由CSDN通过智能技术生成

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

story.html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Man bites dog</title>
    <link rel="stylesheet" type="text/css" media="screen" href="styles/intro.css" />
    <script type="text/javascript" src="scripts/addLoadEvent.js">
    </script>
    <script type="text/javascript" src="scripts/addClass.js">
    </script>
    <script type="text/javascript" src="scripts/styleHeaderSiblings.js">
    </script>
    <script type="text/javascript" src="scripts/styleElementSiblings.js">
    </script>
</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! Extra!</h1>
    <p>Further developments are unfolding.</p>
    <p>You can read all about it here.</p>
</body>

</html>

scripts/addClass.js

function addClass(element, value) {
    if (!element.className) {
        element.className = value;
    } else {
        newClassName = element.className;
        newClassName += " ";
        newClassName += value;
        element.className = newClassName;
    }
}

scripts/addLoadEvent.js

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function () {
            oldonload();
            func();
        }
    }
}

scripts/styleElementSiblings.js

function styleElementSiblings(tag, theclass) {
    if (!document.getElementsByTagName) return false;
    var elems = document.getElementsByTagName(tag);
    for (var i = 0; i < elems.length; i++) {
        var elem = getNextElement(elems[i].nextSibling);
        addClass(elem, theclass);
    }
}

scripts/styleHeaderSiblings.js

function getNextElement(node) {
    if (node.nodeType == 1) {
        return node;
    }
    if (node.nextSibling) {
        return getNextElement(node.nextSibling);
    }
    return null;
}

function styleHeaderSiblings() {
    styleElementSiblings("h1", "intro");
}

addLoadEvent(styleHeaderSiblings);

styles/intro.css

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

结果

在这里插入图片描述

Darcyyyy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM Scripting 学习九-story

DOM Scripting 学习笔记
复制链接

扫一扫

专栏目录