Changing CSS with JavaScript

Okay, let's do this!

Now that we know the anatomy of a function, and we know how to format our elements using CSS, let's try to change the CSS formatting of an element using a function!

We want to change the image that's displayed in a div.  So naturally, the first thing we need is 2 images.

 The Images

Here they are:

Save these images to your project folder.  Or make your own, it doesn't matter.  Be sure to save them in the "images" folder of your "htmlfolder"... the "htmlfolder" of course being the location of your html files you're working on.

The HTML

Now that you have your images, you need to put one of them on your page.

To do this, make a div and give it the class of "clickTest" and the id of "imageTestA".

<div class="clickTest" id="imageTestA" ></div>

The CSS

  Now with your div in place, add to your CSS a block for the style of this div.

.clickTest{

      background-image:url('../images/ButtonTestA.png');

      background-repeat:no-repeat;

      width:200px;

      height:200px;

      z-index:30;

      top:200px;

      left:600px;

      position:absolute;

}

Now with your CSS in place, check to make sure the image is loading and visible on the page.

If it is not, check to make sure you have the image in the correct folder which is "htmlfolder/images/"

Where "htmlfolder" is the path to your html file.

The Function

Once you have the image showing up, you need to create a function to change it.

function clickImg() {
      var div = document.getElementById('ImageTestA');
      div.style.background = "url('images/ButtonTestB.png') no-repeat";
}

WOAH! WAIT A MINUTE!

"What's going on here?" you ask?  Ok, I'll tell you...

First, we need to declare our function:

function clickImg(){}

But before we can change an element on the page, we need to tell the script what the element is!

To do this, you need to use "getElementById()"  which is a function built into the "document".

Use "document" to get information from the page at any time.  This will be something you do a lot.

So, what we're doing in this script is acquiring the element and storing it in a variable which is "div"

var div = document.getElementById('ImageTestA');

So here, you see our variable is defined, we execute the function getElementById(), which is a function of document, and we pass it the argument of ImageTestA; which is the id we gave our div.

if we wanted to change div to something else, we could do that by simply saying

div = somevalue;

But we won't do that... not now anyway.

After we've acquired our element and stored it in the variable "div", we can then change attributes of it.

We do this by adding:

div.style

Style is an associative array of the element that stores the CSS of the element.

This means, that by adding .background to the end of div.style we could change the background attributes of Style of the div...  Make sense?

div.style.background = "url('images/ButtonTestB.png') no-repeat";

This is the same as putting in your stylesheet:

.clickTest {
      background:url('../images/ButtonTestB.png');
}

But why did we have to put the ../ in our stylesheet, but not in our script?

This is because the script is executed from the document.  And the path to the image from the document is "images/ButtonTestB.png", while the path from the examplePageA.css to the image is "../images/ButtonTestB.png"... this is because in order for the css file to see the image, the css file has to go back a folder, and then into the images folder.

You put that all together, and you get:

function clickImg() {

      var div = document.getElementById('ImageTestA');

      div.style.background = "url('images/ButtonTestB.png') no-repeat";

}

Hopefully, that wasn't too confusing.


If you load it up, the page should function like this one does:

CLICK HERE TO SEE THE DEMO

I hope you enjoyed this as much as I did.  Good luck!  I'd like to see if anyone does anything cool with this too, so if anyone is reading this, feel free to shoot me some urls with your work!


Cheers,
Don