HTML and CSS Reference
In-Depth Information
EXAMPLE
15.13 (
CONTINUED
)
</script>
</head>
<body>
6
<p id="para1" style
="font-family: cursive ;
background-color: yellow;
border-style:solid;
border-width:2px;
border-color:blue;">
The news is so fabulous, I need to shout it out again! You
won the lottery!<br />
</p>
<p id="para2">
I like your style, not what you say.
</p>
7
<input type="button" onClick="JavaScript:stylePara(false);"
value="Clone me" />
</body>
</html>
EXPLANATION
1
The purpose of the
stylePara()
function is to copy the style of a paragraph where
style
is an attribute of the first paragraph. (To set the class attribute use the
class-
Name
property.)
2
First we need to get a reference to both paragraphs, the one with the
style
attribute
set, and the one without it.
3
Next we use the
getAttributeNode()
method to get a reference to the
style
attribute
for the first paragraph. The returned reference is assigned to
p1Style
.
4
This cloning step creates a replica of the
style
attribute of the first paragraph.
5
The
setAttributeNode()
method sets the
style
attribute for the second paragraph.
6
The style for the first paragraph is assigned to the
style
attribute. This is the attri-
bute that will be cloned and set for the second paragraph.
7
When the user clicks this button, the function
stylePara()
will be called with an
argument of false. In this example the program works the same way whether you
send true or false as the mode. Figures 15.24 and 15.25 show the results.
Figure 15.24
Cloning a style attribute—before clone.
