To refer to a CSS property by using JavaScript, do the following:
Examples:
| CSS property | JavaScript encoding |
|---|---|
| border | border |
| font-size | fontSize |
| border-color | borderColor |
The syntax for modificaton a CSS property with JavaScript strictly depends on the DOM (Document Object Model) supported by the browser.
In order to manipulate the CSS styles one should first get an access to the styles by using getElementById() or getElementsByTagName() methods.
This method takes one parameter, the ID of an element. One should first refer to the style property of that element and modify it by using the above encoding and the "dot notation".
For example, if one has a paragraph in the document with ID "myPar"
To modify the background color of this paragraph, the following instruction can be used:
Check how it works:
This is a test paragraph whose background color will be modified dynamically. Choose the desired color from the selection list. Note that the browser neither reload nor rebuild the rest of the page. You do not need to register the ID of this paragraph in the CSS style file in the header, just provide the ID. if an HTML element uses the <name> attribute, you can also provide an ID for this element.
This feature is provided by the following code:
|
<form action=""> <input type="button" value="green" onclick="document.getElementById('colpar').style.background='green';" /> <input type="button" value="white" onclick="document.getElementById('colpar').style.background='white';" /> <input type="button" value="yellow" onclick="document.getElementById('colpar').style.background='yellow'; /"> <input type="button" value="red" onclick="document.getElementById('colpar').style.background='red';" /> <input type="button" value="body" onclick="document.getElementById('colpar').style.background=backColor;" /> </form> |
This method returns an array of all HTML elements represented by the tag name. You can then use an index to get to a particular tag in the array. The tags are numbered starting with 0.
In the following example we modify the colors of the <h5> tags. It will work only if your browser supports W3C DOM.
To modify the color of the second <h5> tag, the following JavaScript code can be used:
Older versions of Internet Explorer (prior to 5.5) do not support the obe tags. Instead, they use the all property and the tags(tag name) method.
This property refers to all elements in the HTML document. The elements are stored in the array. One can access a particular element either by index in this array, or by tag ID, if it is provided. You can then yse the style property of the element to modify its sttyle similarly as it is described above.
Examples:
| JavaScript code | Comments |
|---|---|
| document.all[3].style.color = "red"; | modify the color property of HTML element #3 |
|
<h3 id="myH3">Sample H3 tag</h3> document.all["myH3"].style.color="red"; |
modify the color property of <H3> tag with ID myH3 |
This method is similar to the getElementsByTagName() method and also returns an array of tags with a specific name. This can be used to modify the style of the tag with the given index in this array.
Example:
One should always take care on all possible visitors of the Web site and provide a possibility for them to see your documents in a proper way. For this one need to know what browser is used to display the Web page. This can be done by invoking a specially disigned Application Programming Interface (API) file.
The API file should contain instructions for recognizing the browser type. For this you can test which DOM is being used by checking whether the document object has a layers property (old Navigator versions), and all property (old IE versions), or the getElementsById() method (W3C DOM browsers). This can be done as follows:
The variables W3C, IE, and NS will be set to true or false respectively. One can use these variables to download a separate version of your document designed specifically for the given browser. Here is an example for 3 popular browsers: