|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>CSS-DOM</
title
>
<
script
src
=
"addLoadEvent.js"
></
script
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"9.css"
>
<
script
src
=
"9.js"
></
script
>
</
head
>
<
body
>
<!-- <p id="example">
An example of a paragraph
</p>
-->
<
h1
>Hold the front page</
h1
>
<
p
> This first paragraph leads you in;</
p
>
<
p
> This first paragraph leads you in;</
p
>
<
p
> This first paragraph leads you in;</
p
>
<
h1
>Extra! Extra!</
h1
>
<
p
> Further developements are unfolding</
p
>
<
p
> Further developements are unfolding</
p
>
<
p
> Further developements are unfolding</
p
>
</
body
>
</
html
>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
function
styleHeadersSiblings(){
if
(!document.getElementsByTagName)
return
false
;
var
headers = document.getElementsByTagName(
"h1"
);
for
(
var
i = 0;i < headers.length; i++){
var
elem = getNextElement(headers[i].nextSibling);
elem.style.color =
"red"
;
elem.style.fontSize =
"1.2em"
;
}
}
//下一个元素节点通用函数
function
getNextElement(node){
if
(node.nodeType == 1){
return
node;
}
//元素下一个节点，继续执行本次函数，循环，一直到找到下一个元素节点为止，则退出本次循环
if
(node.nextSibling){
return
getNextElement(node.nextSibling);
}
return
null
;
}
window.onload = styleHeadersSiblings;
|
本文转自 小旭依然 51CTO博客，原文链接:http://blog.51cto.com/xuyran/1783860
