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. 设置gridcontrol的焦点行

    private void gridView1_DoubleClick(object sender, EventArgs e)        {            try            {  ...

  2. PAT (Advanced Level) 1080. Graduate Admission (30)

    简单题. #include<cstdio> #include<cstring> #include<cmath> #include<vector> #in ...

  3. 卷积神经网络在tenserflow的实现

    卷积神经网络的理论基础看这篇:http://blog.csdn.net/stdcoutzyx/article/details/41596663/ 卷积神经网络的tenserflow教程看这里:http ...

  4. IP组播技术介绍及实现例子

    引 言 近年来,随着Internet的迅速普及和爆炸性发展,在Internet上产生了许多新的应用,其中不少是高带宽的多媒体应用,譬如网 络视频会议.网络音频/视频广播.AOD/VOD.股市行情发布. ...

  5. php单元测试到底是什么东西呢？

    前言: 真正写php代码也有3年时间了,勉强算是一个php程序员, 但是,心底却一直没有底气. 都说测试驱动开发,可我连程序开发中什么是单元测试?这种基本的程序员的素养都 还不是很清楚,痛定思痛,决定 ...

  6. Quick Cocos2dx Http通讯 JSON

    参考: 1 http://stackoverflow.com/questions/5975952/how-to-extract-http-message-body-in-basehttprequest ...

  7. ice grid 完整部署过程

    待补充 一 理论准备 一个IceGrid集群有一个registry(注册表,用于定位)和多个node组成. IceGrid配置包括集群配置和应用配置: config.grid是集群配置,配置Regis ...

  8. Cookie 简单使用记录浏览记录

    ItemsDAO.java package dao; import java.util.* ; import java.sql.* ; import util.DBHelper; import ent ...

  9. HttpListener 实现web服务端

    1. using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syste ...

  10. Python twisted article

    学习python twisted 的好文章 An Introduction to Asynchronous Programming and Twisted Reference: http://kron ...