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

【js 编程艺术】小制作三的更多相关文章

  1. 【js 编程艺术】小制作一

    最近在看js编程艺术,照葫芦画瓢,做了一个小网页.作为一枚前端渣渣,遇到了好多坑,在这里就不提了. 首先是html代码 /*gallery.html*/<!DOCTYPE html> &l ...

  2. 程序员编程艺术：第三章续、Top K算法问题的实现

    程序员编程艺术:第三章续.Top K算法问题的实现 作者:July,zhouzhenren,yansha.     致谢:微软100题实现组,狂想曲创作组.     时间:2011年05月08日    ...

  3. 【js编程艺术】小制作六

    1.html /* movie.html*/<!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  4. 【js编程艺术】小制作五

    1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  5. 【js 编程艺术】小制作四

    1. html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  6. 【js 编程艺术】小制作二

    首先是一个html文档 /* explanation.html */<!DOCTYPE html> <html> <head> <meta charset=& ...

  7. JavaScript DOM编程艺术读书笔记(三)

    第七章 动态创建标记 在web浏览器中往文档添加标记,先回顾下过去使用的技术: <body> <script type="text/javascript"> ...

  8. javascript dom编程艺术笔记第三章：DOM操作的5个基本方法

    JavaScript的 DOM操作,主要是对DOM这三个字母中D.O.M的操作.D代表的是document(文档),即我们可以使用javascript对文档进行操作,O代表的是object(对象),对 ...

  9. JavaScript DOM编程艺术 笔记（三）函数

    函数function 是在你的代码里随时调用的语句 每个函数是个短小的脚本,arguments,传递的参数 function name(arguments){ statements; } functi ...

随机推荐

  1. 针对iOS10的各种问题的解决方法

    1.iOS10相册相机闪退bug: iOS10系统下调用系统相册,相机功能,遇到闪退的情况,描述如下: This app has crashed because it attempted to acc ...

  2. javascript 中 function bind()

    Function bind() and currying <%-- All JavaScript functions have a method called bind that binds t ...

  3. CodeForces 621A Wet Shark and Odd and Even

    水题 #include<cstdio> #include<cstring> #include<cmath> #include<ctime> #inclu ...

  4. [Programming WCF Services]Chapter 1. WCF Essentials - Metadata Exchange

    1.HTTP-GET WCF 方式 通过Http的方式提供metadata 1.1.配置文件方式 <system.serviceModel> <services> <se ...

  5. Linux 软件包安装管理

    转自:http://www.cnblogs.com/Quains/archive/2012/01/03/2311049.html 本文主要是记录下RedHat系列的软件包管理. 内容分为以下三个部分: ...

  6. 反射技术在Android中的应用

    本博客转自:http://blog.csdn.net/tiefeng0606/article/details/51700866 动态语言: 一般认为在程序运行时,允许改变程序结构或变量类型,这种语言称 ...

  7. 网络IO模型

    同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞(non-blocking)IO分别是什么,到底有什么区别?这个问题其实不同的人给出 ...

  8. IOS开发－OC学习－protocol（协议）

    在OC语言中,协议是一组方法,里面有两种方法,一种是遵守这个协议的类的实例必须实现的方法,另一种是可以实现也可以不实现的方法. 例如我定义一个学生的协议,这个协议里有两个方法,其中一个是必选的方法:学 ...

  9. 谈谈线程同步Lock和unLock

    Lock可以使用Condition进行线程之间的调度,它有更好的灵活性,而且在一个对象里面可以有多个Condition(即对象监视器),则线程可以注册在不同的Condition,从而可以 有选择性的调 ...

  10. java中String相等问题

    java中判断两个字符串是否相等的问题   判断两个字符串是否相等的问题.在编程中,通常比较两个字符串是否相同的表达式是"==",但在java中不能这么写.在java中,用的是eq ...