【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 ...
随机推荐
- VS+VA 开发NDK
工欲善其事,必先利其器. Android NDK开发环境,可选择VIM+插件.Eclipse+CDT等,这里介绍另一种选择:VS+VA 软件准备:Visual studio 2008 // 其他版本也 ...
- Mysql（集群）业务水平切割 垂直切割（Amoeba）
Amoeba原理戳这里:Amoeba详细介绍 需要根据企业 数据业务进行切割,垂直切割又称为纵向切割. 垂直切割通说的说就是有多个表,对表进行分离(用户数据.博客文章数据.照片数据.标签数据类型.群 ...
- struts2.0 s标签_小小鸟_百度空间
struts2.0 s标签 1． Struts2页面开发中常用标签使用说明 1.1．往action里传值的使用方式: <input name="userName" type= ...
- 关于服务器跨域问题（使用cors解决）
1.配置cors依赖 pom中加入 <dependency> <groupId>com.thetransactioncompany</groupId> <ar ...
- [iOS]C语言知识点系列视频
C语言知识点系列视频 目录 C语言技术视频-01-变量的定义 C语言技术视频-02-程序分支结构(if...else) C语言技术视频-03-程序分支结构(switch) C语言技术视频-04-程序循 ...
- libconfig第一篇———使用指南
官网:http://www.hyperrealm.com/libconfig/ 1 libconfig是什么? Libconfig是一个结构化的配置文件库,它可以定义一些配置文件,例如test.cfg ...
- fedora安装各种应用软件
1 安装视频播放器 sudo yum install mplayer mplayer-gui 可以从命令行 和 gnome 中启动 2 音量调节 (1)使用 alsamixer alsamixer是一 ...
- 10、手把手教你Extjs5（十）自定义模块的设计
从这一节开始我们来设计并完成一个自定义模块.我们先来确定一个独立的模块的所能定义的一些模块信息.以下信息只是我自己在开发过程中想到或用到的,希望有新的想法的或者有建议的跟贴回复. 一个独立模块包含以下 ...
- UISegmentedControl——分段控件
分段控件,提供了一组按钮,但是只能激活一个.通过UIControlEventValueChanged事件实现与用户的交互,并通过selectedSegmentIndex判断当前选定的控件,通过titl ...
- Undefined symbols for architecture armv7错误解决方法
Undefined symbols for architecture armv7: "_OBJC_CLASS_$_BriefMainModel", referenced from: ...