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. 在线演示红黑树（javascript）

    在线演示地址:http://sandbox.runjs.cn/show/2nngvn8w 有点遗憾,本想实现个很棒的功能,就是红黑树每次“变形”的时候,做个“快照”,“变形”了几次就“快照”几次.方便 ...

  2. javascript books

    脑子里突然冒出这么一句话: “反射 是一种 代理!!!”,javascript ECMScript 6中也开始实现 Reflect 了. php的动态代理, 反射方面,在很多框架中都用到了.也是很多框 ...

  3. (简单) POJ 1321 棋盘问题，回溯。

    Description 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个棋子 ...

  4. mac 访问mysql客户端

    /usr/local/mysql/bin/mysql -u root -p //mac mysql 管理工具推荐 sequek pro

  5. Android实时监听网络状态

    Android实时监听网络状态(1)   其实手机在网络方面的的监听也比较重要,有时候我们必须实时监控这个程序的实时网络状态,android在网络断开与连接的时候都会发出广播,我们通过接收系统的广播就 ...

  6. LPC1788的内部EEPROM使用

    Lpc1788内置有eeprom 使用代码 #ifndef __E2PRONINCHIP_H_ #define __E2PROMINCHIP_H #include "common.h&quo ...

  7. 对AD域进行定期自动备份设置图解

    今天为大家讲解一下,如何对域进行定期的备份,因为如果域出问题了,在公司里那可就不好玩了啊,对做定期备份,在域出问题的时候可以及时恢复,减少对域重建而浪费大量的时间,同样也耽误公司员工的工作,这样的事情 ...

  8. linux下配置ip地址四种方法(图文)

    (1)Ifconfig命令   第一种使用ifconfig命令配置网卡的ip地址.此命令通常用来零时的测试用,计算机启动后 ip地址的配置将自动失效.具体用法如下.Ipconfig  ethx   i ...

  9. 微信小程序登录

    一. 小程序不支持cookie会话 1. 通过传递与检验3rd_session来保持会话 2. 3rd_session可以执行'`head -n 80 /dev/urandom | tr -dc A- ...

  10. javascript-函数及兼容

    1.事件绑定,删除,传播,默认方式,获取类型的兼容 var eventList = { //添加事件兼容 addEvent:function (event,type,backevent) { if ( ...