Skip to main content

Visit Mozilla.org

CSS:Getting Started:JavaScript

From MDC


This is Part II of the tutorial. Part II contains some examples that show the scope of CSS in Mozilla.

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.

[edit] Information: JavaScript

JavaScript is a programming language. When you use any Mozilla application (for example, your Mozilla browser) much of the code that your computer runs is written in JavaScript.

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 in Mozilla, see the JavaScript page in this wiki.

[edit] 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 PUBLIC "-//W3C//DTD HTML 4.0//EN">
<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 type="button" onclick="doDemo(this);">Click Me</BUTTON>

</BODY>
</HTML>

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

/*** JavaScript demonstration ***/
#square {
  width: 20em;
  height: 20em;
  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
function doDemo (button) {
  var square = document.getElementById("square")
  square.style.backgroundColor = "#fa4"
  button.setAttribute("disabled", "true")
  setTimeout(clearDemo, 2000, button)
  }

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

Open the document in your browser and press the button.

This wiki does not support JavaScript in pages, so it is not possible to show the demonstration here. It looks something like this, before and after you press the button:

JavaScript demonstration

JavaScript demonstration

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.
  • Your browser has a built-in CSS rule for button[disabled="true"] that changes the button's appearance when it is disabled.
Challenge
Change the script so that the square jumps to the right by 20 em when its color changes, and jumps back afterwards.

[edit] 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

Retrieved from "http://developer.mozilla.org/en/docs/CSS:Getting_Started:JavaScript"