Java Reference
In-Depth Information
Updating CSS
Every element node has a
style
property. These can be used to dynamically modify the
presentation of any element on a web page.
To see an example of this, reload the page again to reset the DOM. We can add a border to
the
swim
paragraph with the following code:
var swim = document.getElementsByClassName('swim')[0];
<< undefined
swim.style.border = "blue 2px solid";
<< "blue 2px solid"
Camel Case Properties
Any CSS property names that are separated by dashes must be written in camelCase nota-
tion, so the dash is removed and the next letter is capitalized because dashes are not legal
characters in property names.
For example,
background-color
becomes
backgroundColor
. We can change the
color of the
bike
background to green using this code:
var bike = document.getElementById("bike");
<< undefined
bike.style.backgroundColor = "green";
<< "green"
You can see this change in
Figure 6.11
.
