Manipulating CSS with JavaScript

JavaScript can be a very powerful tool when used in conjunction with CSS.

The support for and implementation of CSS access from JavaScript has traditionally been patchy. This is still the case to a certain extent as documented by Quirksmode. Despite this, one universally supported method of getting and setting inline CSS values from JavaScript does exist.

HTMLElement.style;

Please note that this will not return values from a <style> tag block in the head of the page nor will it return values from linked external stylesheets. Support for doing that is patchy accross different browser platforms although all modern browsers have their own ways of getting this to work.

Accessing and changing external and <style> values is possible in a cross-browser manner when using JQuery.

Using HTMLElement.style with document.getElementById()

Using getElementById() always returns a HTMLElement object. As we can see above, the HTMLElement object contains a style attribute which can be used to get or set CSS style elements. For example:

<script language="javascript" type="text/javascript">
// grab a HTMLElement object for this <pre> block
   var preblock = document.getElementById("topmenu");
   
// include a function which will change the font using CSS
   function changeFont(font) {
      preblock.style.fontFamily = font;
   }
</script>

<form action="#">
  <input type="button" value="Georgia" onclick="changeFont('Georgia');"/>
  <input type="button" value="Courier" onclick="changeFont('Courier New');"/>
</form>

Live example

Note: Notice that CSS attribute names are no longer hypenated as they are in strict CSS notation. Instead they are presented in Camel-case. So, the CSS attribute:

font-family

...becomes:

fontFamily

Note the lack of space between "font" and "Family" and that "Family" has an uppercase F. This is also the case when using CSS attributes in jQuery.

Another example

The following code draws three buttons and a <div>. Each of the buttons change the colour of the <div> block above them and also the text within the block.

<div id="colourBlock">
    No colour here!
</div>

<form>
    <input type="button" value="Red" onclick="changeColour('red')" />
    <input type="button" value="Green" onclick="changeColour('green')" />
    <input type="button" value="Blue" onclick="changeColour('blue')" />
</form>
<div>Press these buttons to change the block</div>

<script language="javascript" type="text/javascript">

// define a new function called changeColour
    function changeColour(colour) {

// create a pointer to the block by assigning getElementById
// to a variable called block
        var block = document.getElementById('colourBlock');
        
// perform a little stylesheet manipulation
// set the background to the colour passed into this function
        block.style.background = colour;
        block.style.color = "white";

// set the block's text to the passed colour
        block.innerHTML = colour;
    }
    
</script>

Live example

No colour here!

Exercise!

Now open the stylesheets exercise and work through it.

You may also use the JavaScript scratch pad to try out code quickly.