Your Search Results

    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: 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
    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.

    Here is the Live Example

    JavaScript demonstration

    JavaScript demonstration

    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.
    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