• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 33. Styling for HTML Elements > Object Models and Cascading Style Sheet...

Object Models and Cascading Style Sheets

Many people assume the style property of an element contains exact references to each styling effect for that element. This simply is not true, and the official documentation from both Microsoft and the W3C confirms this. The style property only retrieves from the style attribute. Listing 33.8 shows what happens when you try to retrieve this property.

Listing 33.8. Style Sheets Do Not Reflect the style Property

<?xml version="1.0" ?>
<!-- Netscape 6.x, Internet Explorer 5.0+ only. -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title></title>
<style type="text/css">
p {
   color: #ff0000;
   }
</style>
<script language="JavaScript" type="text/javascript">
<!--
function go() {
   var p = document.getElementsByTagName("p")[0]
   var pre = document.createElement("pre")
   var pre_text = "p.style.color = '" + p.style.color + "'."
   pre.appendChild(document.createTextNode(pre_text))
   document.body.appendChild(pre)
   }
//-->
</script>
</head>
<body>
<p>This text is red.</p>
<pre><a href="#" onclick="go();
return false">Get the style.color property of the paragraph.</a></pre>
<!-- Results after clicking on the link:
p.style.color = ''.
-->
</body>
</html>


					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint