AJAX Tutorial: JavaScript CSS Manipulation using DOM

JavaScript CSS Tutorial Explanations

This is a JavaScript DOM exercise from Chapter 2 of Microsoft AJAX Library Essentials: JavaScript in ASP.NET AJAX 1.0 Explained.

CSS (Cascading Style Sheets) is certainly a familiar term to you. CSS is a powerful language used to describe the appearance of the elements of a web page. CSS definitions can be stored in one or more files with the .css extension, allowing web designers to detach the CSS styling definitions from the HTML document structure. If the job is done right and CSS is used consistently in a website, CSS will allow you to make visual changes to the entire site (or parts of the site) with very little effort, just by editing the CSS file.

While technically it’s not necessary to know CSS when implementing AJAX, in practice it’s very desirable to be at least educated in CSS basics, even if the HTML and CSS design is created by someone else. CSS is a vast subject; there are many books and tutorials on CSS, including those you can find at http://www.w3.org/Style/CSS/learning and http://www.csstutorial.net/. The Wikipedia page on CSS (http://en.wikipedia.org/wiki/Cascading_Style_Sheets) contains useful material on the history of CSS, and its current state and limitations.

This simple exercise demonstrates a few techniques of using CSS with JavaScript, which is the most relevant scenario in the context of AJAX development. The exercises draws a nice table, and you have two buttons named Set Style 1 and Set Style 2 that change the table's colors and appearance by just switching the current styles. The code that executes when the first button is clicked is:

// Change table style to style 1
function setStyle1()
{
  // obtain references to HTML elements
  oTable = document.getElementById("table");
  oTableHead = document.getElementById("tableHead");
  oTableFirstLine = document.getElementById("tableFirstLine");
  oTableSecondLine = document.getElementById("tableSecondLine");

  // set styles
  oTable.className = "Table1";
  oTableHead.className = "TableHead1";
  oTableFirstLine.className = "TableContent1";
  oTableSecondLine.className = "TableContent1";
}

The TableStyles.css file contains two sets of styles that can be applied to the table in JavaScriptCSS.html. When the user clicks one of the Style buttons, the JavaScript DOM is used to assign those styles to the elements of the table.

In the first part of the SetStyle methods, we use the getElementByID function to obtain references to the HTML elements that we want to apply CSS styles to:

  // obtain references to HTML elements
  oTable = document.getElementById("table");
  oTableHead = document.getElementById("tableHead");
  oTableFirstLine = document.getElementById("tableFirstLine");
  oTableSecondLine = document.getElementById("tableSecondLine");

As with many other web development tasks, manipulating CSS can be the subject of significant inconsistencies between different browsers. For example, in the previous code snippet, try to rename the object names to be the same as their associated HTML elements (such as renaming oTable to table) to see Internet Explorer stop working. Internet Explorer doesn't like it if there's already an object with that ID in the HTML file.

Once initializing these objects, the safe way that works with all browsers to set the elements' CSS style is to use their className property:

  // set styles
  oTable.className = "Table1";
  oTableHead.className = "TableHead1";
  oTableFirstLine.className = "TableContent1";
  oTableSecondLine.className = "TableContent1";

Implement the exercise step by step and find detailed explanations in our book, Microsoft AJAX Library Essentials: JavaScript in ASP.NET AJAX 1.0 Explained.