【js 编程艺术】小制作三
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 编程艺术】小制作三的更多相关文章
- 【js 编程艺术】小制作一
最近在看js编程艺术,照葫芦画瓢,做了一个小网页.作为一枚前端渣渣,遇到了好多坑,在这里就不提了. 首先是html代码 /*gallery.html*/<!DOCTYPE html> &l ...
- 程序员编程艺术：第三章续、Top K算法问题的实现
程序员编程艺术:第三章续.Top K算法问题的实现 作者:July,zhouzhenren,yansha. 致谢:微软100题实现组,狂想曲创作组. 时间:2011年05月08日 ...
- 【js编程艺术】小制作六
1.html /* movie.html*/<!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- 【js编程艺术】小制作五
1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
- 【js 编程艺术】小制作四
1. html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
- 【js 编程艺术】小制作二
首先是一个html文档 /* explanation.html */<!DOCTYPE html> <html> <head> <meta charset=& ...
- JavaScript DOM编程艺术读书笔记(三)
第七章 动态创建标记 在web浏览器中往文档添加标记,先回顾下过去使用的技术: <body> <script type="text/javascript"> ...
- javascript dom编程艺术笔记第三章：DOM操作的5个基本方法
JavaScript的 DOM操作,主要是对DOM这三个字母中D.O.M的操作.D代表的是document(文档),即我们可以使用javascript对文档进行操作,O代表的是object(对象),对 ...
- JavaScript DOM编程艺术 笔记（三）函数
函数function 是在你的代码里随时调用的语句 每个函数是个短小的脚本,arguments,传递的参数 function name(arguments){ statements; } functi ...
随机推荐
- mysql 触发器学习
1. 一个简单的例子 1.1. 创建表: create table t(s1 integer); 1.2. 触发器: delimiter | create trigger t_trigger befo ...
- Android学习笔记之Intent(1)
1.Intent指定启动目标组件 2.Intentfilter描述基本组件所在地址 3.其他包引入资源文件时记得引入R所在的包 package com.jikexueyuan.intent; impo ...
- PAT (Advanced Level) 1030. Travel Plan (30)
先处理出最短路上的边.变成一个DAG,然后在DAG上进行DFS. #include<iostream> #include<cstring> #include<cmath& ...
- word采用尾注进行参考文献排版的一些问题
使用Word中尾注的功能可以很好地解决论文中参考文献的排序问题.方法如下: 1．光标移到要插入参考文献的地方,菜单中“插入”——“引用”——“脚注和尾注”. 2．对话框中选择“尾注”,编号方式选“自动 ...
- 17.4.3 使用MulticastSocket实现多点广播（2）
// 让该类实现Runnable接口,该类的实例可作为线程的target public class MulticastSocketTest implements Runnable { // 使用常量作 ...
- Servlet中文乱码处理
} } ...
- Laravel 数据插入
Laravel 的数据库操作基于 Eloquent ORM,在插入数据时有以下几种方式,返回结果也不会不同: 1.insert 插入后会返回 true or false: 2.create 插入成功后 ...
- (简单) POJ 3984 迷宫问题，BFS。
Description 定义一个二维数组: int maze[5][5] = { 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, ...
- 设计模式笔记之二：Android开发中的MVP架构（转）
写在前面,本博客来源于公众号文章:http://mp.weixin.qq.com/s?__biz=MzA3MDMyMjkzNg==&mid=402435540&idx=1&sn ...
- iOS开发——生成条形码，二维码
- (void)viewDidLoad { [super viewDidLoad]; self.imageView.image = [self generateBarCode:@"15248 ...