CSS Properties in Javascript
The combination of CSS3 and JavaScript promises some great effects with slick performance, high reliability, and minimum code complexity. In this section we look at some ways to get and set CSS3 properties successfully from within your JavaScript code.
Converting CSS Property Names to JavaScript
As I mentioned in priviews section “JavaScript and CSS,” to make the names of CSS properties compatible with JavaScript naming conventions, CSS property names need a small conversion from the format they have in stylesheets.
Instead of using lowercase names and hyphens as they do in CSS, the JavaScript versions have the hyphens removed and the following characters capitalized. Hence, border-radius becomes borderRadius. Property names having no hyphens, such as width, are unchanged.
You saw in priviews section “JavaScript and CSS,” how to access element style properties using this naming convention along with the DOM style property:
var bRad = document.getElementById("div1").style.borderRadius;
As I mentioned at that time, while this can be useful, it is limited to elements with inline styles; for elements with CSS declarations grouped in <style> elements in the page head, or in external files, it won’t work. Luckily, there’s a better way, which I’ll discuss now.
The DOM getComputedStyle() Method
Nowadays nearly all browsers support the DOM getComputedStyle() method, which accesses the final (that is, computed) style of an element. By final style, we mean the style in which the browser finally displays the element after applying (in their appropriate order) all of the styling rules relevant to that element, be they inline, external, or inherited from container elements.
The getComputedStyle() method returns an object having various methods, including getPropertyValue(property), which returns the current value for the given CSS property name:
var myDiv = document.getElementById("div1");
var bRad = getComputedStyle(myDiv).getPropertyValue("borderRadius");
Try it Yourself: Controlling Lighting Effects
Let’s create a small application to use box-shadow and radialgradient, both controlled by JavaScript, to control lighting effects in a simple HTML page.
<html>
<title>Controlling CSS3 Effects</title>
<style>
#div1 {
width: 600px;
height: 350px;
background-color: #6699cc;
}
#div2 {
background-color: #aaaaff;
width: 80px;
height: 80px;
padding: 20px;
position: relative;
left: 240px;
top: 105px;
}
</style>
<script>
window.onload = function() {
document.getElementById("btn1").onclick = function() {
document.getElementById("div1").style.background = "radialgradient(
at top left, white, #6699cc)" ;
document.getElementById("div2").style.boxShadow = "10px 10px
10px #808080" ;
}
document.getElementById("btn2").onclick = function() {
document.getElementById("div1").style.background = "radialgradient(
at top right, white, #6699cc)" ;
document.getElementById("div2").style.boxShadow = "-10px 10px
10px #808080" ;
}
document.getElementById("btn3").onclick = function() {
document.getElementById("div1").style.background = "radialgradient(
at bottom, white, #6699cc)" ;
document.getElementById("div2").style.boxShadow = "0px -10px
10px #808080" ;
}
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">
LIGHTS:<br/>
<input type="button" id="btn1" value="Top Left"><br/>
<input type="button" id="btn2" value="Top Right"><br/>
<input type="button" id="btn3" value="Bottom">
</div>
</div>
</body>
</html>
First, take a look at the <body> section of the page. It’s very simple, containing just two nested <div> elements, the inner one containing three buttons, labeled Top Left, Top Right, and Bottom, respectively.
Returning to the <head> section of the page, you’ll see that the window.onload event causes the attachment of an onclick event handler to each of these buttons. In each case, the event handler changes the gradient of the outer <div> element’s background and the direction of the box-shadow style of the inner <div> element. The combined effect is to simulate a light source emanating from one of three directions.
Note how there are no images used to create these effects—something that wouldn’t have been possible prior to CSS3.