【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 ...
随机推荐
- js - object的属性操作
视频学习地址: http://www.imooc.com/video/6002 原文PPT下载地址: http://img.mukewang.com/down/54c5ec1a000141f10000 ...
- javascript 函数的基础知识
1. Why JavaScript functions always return a value? I'm taking a course in JavaScript programming, an ...
- log4CXX第二篇---配置文件（properties文件）详解
一.Log4j简介 Log4j有三个主要的组件:Loggers(记录器),Appenders (输出源)和Layouts(布局).这里可简单理解为日志类别,日志要输出的地方和日志以何种形式输出.综合使 ...
- mysql优化------2 查看系统性能（表大小，I/o性能）
三:判断mysql I/0 性能的一种方式(网络搜集供参考) show global status like 'innodb_dblwr%'\G 如果innodb_dblwr_pages_writ ...
- C#设计模式(6)——原型模式
一.概念 二.模型 三.代码实现 ///火影忍者中鸣人的影分身和孙悟空的的变都是原型模式 class Client { static void Main(string[] args) { // 孙悟空 ...
- CSS重设(reset)
在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视 ...
- CSS长度单位详解
序言 长度单位可以总体的分为绝对长度单位和相对长度单位.CSS中最为大家熟知的无疑是px和em,但与此同时还存在pt, rem, vw, vh等其他计量单位,使用好它们可以大大增长我们的开发效率.本篇 ...
- SQL Server数据库备份方法
数据库备份,是在数据丢失的情况下,能及时恢复重要数据,防止数据丢失的一种重要手段.一个合理的数据库备份方案,应该能够在数据丢失时,有效地恢复重要数据,同时需要考虑技术实现难度和有效地利用资源. 数据库 ...
- leangoo
leangoo网址:https://www.leangoo.com/
- OI队内测试一【数论概率期望】
版权声明:未经本人允许,擅自转载,一旦发现将严肃处理,情节严重者,将追究法律责任! 序:代码部分待更[因为在家写博客,代码保存在机房] 测试分数:110 本应分数:160 改完分数:200 T1: 题 ...