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. [iOS]C语言技术视频-08-结构体的定义

    下载地址: 链接: http://pan.baidu.com/s/1dlEFW 密码: 9e5u

  2. MongoDB 基本命令

    ./mongo  进入命令行. 1.show dbs 显示当前数据库服务器上的数据库 2.use pagedb 切换到指定数据库pagedb的上下文,可以在此上下文中管理pagedb数据库以及其中的集 ...

  3. [Lua]Mac系统上安装Lua环境

    1.下载 Lua语言的官方网站 http://www.lua.org/ 下载最新版本的Lua环境 2.安装 解压下载包lua-5.3.1.tar.gz 打开终端Terminal 使用cd命令进入该目录 ...

  4. OPENCV图像变换-2

    一.经典霍夫变换 霍夫变换是图像处理中的一种特征提取技术,该方法通过在一个参数空间中通过计算累计结果的局部最大值来得到一个符合该特定形状的集合,作为结果. 运用两个坐标空间之间的变换,将一个空间中具有 ...

  5. CodeForces 625A Guest From the Past

    贪心水题 #include <stdio.h> #include <algorithm> #include <string.h> #include <queu ...

  6. css（一）-- 概述以及引入方式

    概述 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可 ...

  7. [题解]bzoj 3223 文艺平衡树

    3223: Tyvj 1729 文艺平衡树 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 3884  Solved: 2235[Submit][Sta ...

  8. Java虚拟机——进度1

    Java 虚拟机       一.Java虚拟机的基本结构 ①类加载子系统:从文件系统或者网络中加载Class信息,存放在方法区中. ②方法区中存放放进来的Class信息,也包括一些运行时常量池信息包 ...

  9. 创业类网站建设日志1——搭建服务器svn以及前端开发环境

    1.需要在linux环境的服务器下搭建node和npm还有Grunt,所以先需要一个叫putty的工具连接服务器命令行终端 2.双击putty工具,在HostName一栏输入项目服务器地址:172.1 ...

  10. OC-Objection 学习笔记之一：简单的开始

    Objection 统一管理对象的引用问题,我想这就是这种技术的意义吧. 废话不说,咱们直接上步骤吧: 1:协议 我们的意识里要知道,一切围绕协议来进行. 下面的协议是一个视图的协议,该协议简单到不能 ...