Scripting and CSS | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

Microsoft Internet Explorer 4 was the first browser to demonstrate how style sheets could be manipulated using scripting language. The small markup fragment that follows shows how events can be tied with style changes to make text that changes color or size in response to a mouse event. In this situation, you change the style property and set its color and font-size CSS properties using the color and fontSize JavaScript properties for the tag.

  <span id="testspan" onmouseover="testspan.style.color='#FF0000';"   onmouseout="testspan.style.color='#0000FF';"   onclick="testspan.style.fontSize='larger';">  Click Me!  </span>

In the 4. x generation DHTML style approach, Netscape and Microsoft support scripting access for style sheets. Of course, the variations between the two browsers are significant. You should use DOM style interaction to make changes, like so:

  <span id="testspan"   onmouseover="document.getElementById('testspan').style.color='red';"   onmouseout="document.getElementById('testspan').style.color='blue';"   onclick="document.getElementById('testspan').style.fontSize='larger';">  Click Me!  </span>

To simplify the example, we might rely on JavaScript special scripting keyword this as a shortcut reference to the current element.

  <span onmouseover="this.style.color='red';"   onmouseout="this.style.color='blue';"   onclick="this.style.fontSize='larger';">  Click Me!  </span>

Access to CSS via JavaScript is quite elegant under the DOM. If a tag has a style sheet with properties such as font-style , font-size , and border-width , you can access them using properties of the Style object named fontStyle , fontSize , and borderWidth . In nearly all cases, it is a matter of removing the dash in the property name and changing the case of the second and following words in a property to access its equivalent JavaScript property. The following example illustrates how CSS can be manipulated with the DOM:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  CSS via the DOM Demo  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <style type="text/css">  #d1 {       font-style: italic;       font-size: 36pt;       border-style: solid;       border-width: 1px;       width:80%;       text-align: center;      }  </style>   <script type="text/javascript">  <!-- function changeStyle() {  var theElement = document.getElementById('d1');      theElement.style.fontStyle='normal';  theElement.style.fontSize='12pt';  theElement.style.borderStyle='dashed';  theElement.style.borderWidth='3px';  theElement.style.backgroundColor='yellow';   theElement.style.textAlign='left'; }     function show() {  var theElement = document.getElementById('d1');  theElement.style.visibility='visible'; }     function hide() {  var theElement = document.getElementById('d1');  theElement.style.visibility='hidden'; } //-->  </script>   </head>   <body>   <div id="d1">  CSS Test  </div>   <hr />   <form action="#">   <input type="button" value="change" onclick="changeStyle();" />   <input type="button" value="hide" onclick="hide();" />   <input type="button" value="show" onclick="show();" />   </form>   </body>   </html>

While the DOM promises an ease of advanced scripting, so far problems still exist. Cross-browser JavaScript often requires multiple versions of the same code to address all the variations in browsers.

< Day Day Up >