JavaScript and CSS

This is the first section of Part II of the CSS tutorial. Part II contains some examples that show the scope of CSS used with other web and Mozilla technologies.

Each page in Part II illustrates how CSS interacts with some other technology. These pages are not designed to teach you how to use these other technologies. Go to other tutorials to learn about them in detail.

Instead, these pages are designed to illustrate the many uses of CSS. To use these pages, you should have some knowledge of CSS, but you do not need any knowledge of the other technologies.

Previous section (of Part I): Media
Next section: SVG

Information: JavaScript

JavaScript is a programming language. JavaScript is widely used to provide interactivity in web sites and applications.

JavaScript can interact with stylesheets, allowing you to write programs that change a document's style dynamically.

There are three ways to do this:

By working with the document's list of stylesheets—for example: adding, removing or modifying a stylesheet.
By working with the rules in a stylesheet—for example: adding, removing or modifying a rule.
By working with an individual element in the DOM—modifying its style independently of the document's stylesheets

More details
For more information about JavaScript, see the JavaScript page in this wiki.

Action: A JavaScript demonstration

Make a new HTML document, doc5.html. Copy and paste the content from here, making sure that you scroll to get all of it:

<!DOCTYPE html>
<html>

<head>
<title>Mozilla CSS Getting Started - JavaScript demonstration</title>
<link rel="stylesheet" type="text/css" href="style5.css" />
<script type="text/javascript" src="script5.js"></script>
</head>

<body>
<h1>JavaScript sample</h1>
<div id="square"></div>
<button>Click Me</button>

</body>
</html>

Make a new CSS file, style5.css. Copy and paste the content from here:

  #square {
    width: 120px;
    height: 120px;
    border: 2px inset gray;
    margin-bottom: 1em;
  }

  button {
    padding: .5em 2em;
  }

Make a new text file, script5.js. Copy and paste the content from here:

// JavaScript demonstration
var changeBg = function (event) {
    console.log("method called");
    var me = event.target
    ,   square = document.getElementById("square");
    square.style.backgroundColor = "#ffaa44";
    me.setAttribute("disabled", "disabled");
    setTimeout(function () { clearDemo(me) }, 2000);
}

function clearDemo(button) {
    var square = document.getElementById("square");
    square.style.backgroundColor = "transparent";
    button.removeAttribute("disabled");
}

var button = document.querySelector("button"); 
button.addEventListener("click", changeBg); 
console.log(button);

Open the document in your browser and press the button or see a working sample below.

Important notes about this demonstration:

The HTML document links the stylesheet as usual, and it also links the script.
The script works with individual elements in the DOM. It modifies the square's style directly. It modifies the button's style indirectly by changing an attribute.
In JavaScript, document.getElementById("square") is similar in function to to the CSS selector #square.
In JavaScript, backgroundColor corresponds to the CSS property background-color. JavaScript does not allow hyphens in names, so "camelCase" is used instead.
Your browser has a built-in CSS rule for button[disabled="true"] that changes the button's appearance when it is disabled.

In fact, the above HTML document may have a race condition (related information on this W3C page), since having the script element inside the head element may fire up the JavaScript code before the page finishes loading and the code will not work because the button variable will be null. Moving the script element below the button element (just above the body closing tag) on the HTML markup should solve this issue.

Challenge
Change the script so that the square jumps to the right by 20 em when its color changes, and jumps back afterwards.

See a solution to this challenge.

What next?

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

In this demonstration, the HTML document links the script even though only the button element uses the script. Mozilla extends CSS so that it can link JavaScript code (and also content and other stylesheets) to selected elements. The next page demonstrates this: XBL bindings

JavaScript and CSS

Information: JavaScript

Action: A JavaScript demonstration

What next?

Document Tags and Contributors