Class

Projects

CSS and Javascript (DHTML)

One of the nice uses of javascript is that it can change some of the styles on our page. In this example we are going to use certain events such as the page loading or clicking a button modify some of the styles that are used on our page. Let's start with our HTML, add this code to a new html file inside the <body> tags:

<div id="mycontainer">
    <p>Hello</p>
</div>

So all that we have here is a basic div containing some paragraph text. The container div has an id called "mycontainer" so we can easily target it. Simple right? Now let's take a look at some javascript, first in the <head>, be sure to make your opening and closing script tags somewhere:

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

Now we can add some code! What we want to happen is once the page loads, have the background color of the "mycontainer" div change. So first let's create a function, we will call this function once the page loads:

function pageloaded(){

}

Note that "pageloaded" is just the name I decided to give to my function. You can name it anything you want as long as when you call the function later you give it the same name.

The method we use in javascript called "getElementById". It allows us to get the parameter of an object ID. Add the following inside your function:

var myobject = document.getElementById("mycontainer");
alert(myobject);

When you test your file out, It should pop up a box letting you know that myobject is targeting an HTML Object. Now that we found the correct target, we can add the following below our trace statement to modify the style of our object (Note: You can also comment out your trace so it doesn't keep popping up)

myobject.style.color = "#ff0000";

You should see the text turn red, we told the default text color of that div to be red by editing the style property of the HTML object we targeted.

Through the style property we can manage all CSS properties. If there is a hyphen in the property name such as "background-color" we need to combine them into one word, making the first letter of the next word capital:

myobject.style.backgroundColor = "#CCCCCC";

We don't need to make a new variable with the getElementId method, we can write it all as one line:

document.getElementById("mycontainer").style.padding = "25px";

So with all that in our function, we now need a way to call the function once our page loads. Luckily there is a simple attribute we can add to the body tag to tell it what function to run once the page loads. Change the body tag to the following:

<body onload="pageloaded()">

After testing out your file, all of your styles should take effect.

So what if we want something to happen every time the user clicks a button? It's pretty much the same idea, let's set up our button html first (Add this after your </div> tag):

<input type="button" onclick="changesize();" value="Bigger Font" />

You will see I created a new input tag with a few parameters. First the type of "button" indicates that this will show up as a button to the user. Next the onclick attribute let's us call a function once the user presses the button (we didn't make a function called "changesize" yet, but this is what we are going to call it). Lastly, the value parameter lets us select what text we want to show up in the button.

So now all that's left is to create our "changesize" function:

function changesize(){
}

Now what we want this function to do is increase whatever the current font-size is by one. So for example, if our text has a font-size of 14px, clicking the button will set it to 15px.

The first issue we would run into is that the font-size for this element has not been created yet. So we would be unable to find out the value of it to start, so let's define the font size once the page loads, in your previous funciton, add this line of code:

document.getElementById("mycontainer").style.fontSize = "14px";

Good, so now that our default font size is set, lets continue inside the changesize function by adding the following:

var currentsize = document.getElementById("mycontainer").style.fontSize;
alert(currentsize);

This sets a variable of what the current font size is. When you test it out, the alert box should say "14px" (If this is working you can comment out the alert)

So here is the tricky part, currently our value is not a number, it is actually a string because it contains the "px", so if we tried to do math to it (like add 1), we would run into errors. What we need to do next is convert the string to a number (luckily there is a function in javascript to do that):

currentsize = parseFloat(currentsize);

Adding this on the next line in your function will take whatever the current value of currentsize is ("14px") and convert it into only numbers (14).

So now the rest isn't too bad, lets create a new variable for the new number we will make, and then add that number to the font size:

var newsize = currentsize+1;
document.getElementById("mycontainer").style.fontSize = newsize + "px";

Notice that I added the "px" to whatever my number value was, the fontsize started out as a string, I need to make sure I send it back as a string. You should be able to test this out and click away at that button to constantly increase the file size.

Class

Projects

Sponsors

CSS and Javascript (DHTML)

CSS and Javascript (DHTML)

Comments

Post new comment