http://developer.mozilla.org/en/docs/Gecko_DOM_Reference:Examples#Example_5:_Event_Propagation

<!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" xml:lang="en" lang="en" dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="en"/>
    <meta name="KEYWORDS" content="Gecko DOM Reference:Examples" />
<meta name="robots" content="index,follow" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="copyright" href="/en/docs/MDC:Copyrights" />
    <title>Gecko DOM Reference:Examples - MDC</title>
	<link rel="alternate" type="application/rss+xml" title="MDC Webwatch" href="http://developer.mozilla.org/webwatch/?feed=rss" />
	<link rel="alternate" type="application/rss+xml" title="MDC DevNews" href="http://developer.mozilla.org/devnews/?feed=rss" />
	<link rel="alternate" type="application/rss+xml" title="Recent Changes (en)" href="http://developer.mozilla.org/en/docs/index.php?title=Special:Recentchanges&amp;feed=rss" />
	<link rel="alternate" type="application/rss+xml" title="New Pages (en)" href="http://developer.mozilla.org/en/docs/index.php?title=Special:Newpages&amp;feed=rss" />
	<link rel="stylesheet" type="text/css" media="all" href="/css/base.css" />
	<link rel="stylesheet" type="text/css" media="all" href="/css/wiki.css" />
	<link rel="stylesheet" type="text/css" media="print" href="/css/wikiprint.css" />
	<!--[if gte IE 6]><style type="text/css">@import "/en/docs/skins/devmo/IE60Fixes.css";</style><![endif]-->
	<!--[if IE]><script type="text/javascript" src="/en/docs/skins/common/IEFixes.js"></script>
	<meta http-equiv="imagetoolbar" content="no" /><!{endif]-->
    <script type="text/javascript" src="/en/docs/index.php?title=-&amp;action=raw&amp;gen=js"></script>    <script type="text/javascript" src="/en/docs/skins/common/wikibits.js"></script>
    <script type="text/javascript" src="/en/docs/skins/devmo/devmo.js"></script>
    <script type="text/javascript" src="/en/docs/skins/devmo/prototype.js"></script>
    <script type="text/javascript" src="/en/docs/skins/devmo/scriptaculous.js"></script>
    <style type="text/css">/*<![CDATA[*/
@import "/en/docs/index.php?title=MediaWiki:Devmo.css&action=raw&ctype=text/css&smaxage=18000";
@import "/en/docs/index.php?title=-&action=raw&gen=css&maxage=18000";
/*]]>*/</style>              </head>

  <body                 class="ns-0"		id="developer-mozilla-org">


<div id="container">
	<p class="skipLink"><a href="#content" accesskey="2">Skip to main content</a></p>
	<div id="mozilla-org"><a href="http://www.mozilla.org/">Visit Mozilla.org</a></div>

<div id="header">
	<h1><a href="/" title="Return to home page" accesskey="1">Mozilla Developer Network</a></h1>
	<!-- search box -->
		<form name="searchform" action="/en/docs/Special:Nutch" id="searchform">
		<input type="hidden" name="language" value="en">
		<input type="hidden" name="start" value="0">
		<input type="hidden" name="hitsPerPage" value="10">
			<input id="searchInput" name="query" type="text"
				accesskey="s"
				 />
			<input type='submit' name="fulltext"
				class="searchButton"
				value="Search" />
		</form>
	<!-- end searchbox -->
</div>

<div id="navigation">
	<div id="bar">
		<div>
			<ul id="personal">
				<li id="pt-login"><a href="/en/docs/index.php?title=Special:Userlogin&amp;returnto=Gecko_DOM_Reference:Examples">Log in (creating accounts disabled temporarily)</a></li>			</ul>
			<ul id="contenttypes">
					    									      			<li class="selected"><a href="/en/docs/Main_Page">Documentation</a></li>
						     									     									     									     									     									     									     											<li><a href="http://developer.mozilla.org/devnews/">DevNews</a></li>
				<li><a href="http://developer.mozilla.org/webwatch/">Webwatch</a></li>
			</ul>
		</div>
	</div>
</div>
	
			
<div id="page">


	<div id="sidebar">
		<div id="sidebarslideup" class="sidebarslidecontrol" onclick="new Effect.SlideUp('sidebarslidebox'); sidebarUp();">
			Hide Sidebar	
		</div>	
		<div id="sidebarslidedown" class="sidebarslidecontrol" onclick="new Effect.SlideDown('sidebarslidebox'); sidebarDown();" style="display: none;">
			Show Sidebar
		</div>
		<div id="sidebarslidebox">
			
		<div>

		<div id="related">
			<div>
				<h3>Related</h3>
				<p class='catlinks'><a href="/en/docs/index.php?title=Special:Categories&amp;article=Gecko_DOM_Reference%3AExamples" title="Special:Categories">Categories</a>: <a href="/en/docs/Category:Gecko_DOM_Reference" title="Category:Gecko DOM Reference">Gecko DOM Reference</a> | <a href="/en/docs/Category:DOM" title="Category:DOM">DOM</a></p>			</div>
		</div>

		<!-- WIKI NAVIGATION -->
		<script type="text/javascript"> if (window.isMSIE55) fixalpha(); </script>
		<div class="pagetools">
			<div>
					  			<h3>Navigation</h3>
	    		<ul>
	    				      			<li id="n-mainpage"><a href="/en/docs/Main_Page">Main Page</a></li>
	     				      			<li id="n-portal"><a href="/en/docs/MDC:Community_Portal">Community portal</a></li>
	     				      			<li id="n-currentevents"><a href="/en/docs/Current_events">Current events</a></li>
	     				      			<li id="n-recentchanges"><a href="/en/docs/Special:Recentchanges">Recent changes</a></li>
	     				      			<li id="n-randompage"><a href="/en/docs/Special:Random">Random page</a></li>
	     				      			<li id="n-help"><a href="/en/docs/Help:Contents">Help</a></li>
	     				      			<li id="n-sitesupport"><a href="/en/docs/MDC:Site_support">Donations</a></li>
	     				    		</ul>
							</div>
		</div>

		<!-- VIEWS -->
		<div class="pagetools">
			<div>
				<h3>Views</h3>
				<ul>
	  			<li id="ca-nstab-main"
	     			class="selected"	     			><a href="/en/docs/Gecko_DOM_Reference:Examples">Article</a></li><li id="ca-talk"
	     			class="new"	     			><a href="/en/docs/index.php?title=Talk:Gecko_DOM_Reference:Examples&amp;action=edit">Discussion</a></li><li id="ca-edit"
	     				     			><a href="/en/docs/index.php?title=Gecko_DOM_Reference:Examples&amp;action=edit">Edit</a></li><li id="ca-history"
	     				     			><a href="/en/docs/index.php?title=Gecko_DOM_Reference:Examples&amp;action=history">History</a></li>	  			</ul>
			</div>
		</div>

		<!-- TOOLBOX -->
		<div class="pagetools">
			<div>
	    		<h3>Toolbox</h3>
	    		<ul>
		  								<li id="t-whatlinkshere"><a href="/en/docs/Special:Whatlinkshere/Gecko_DOM_Reference:Examples">What links here</a></li>
		  								<li id="t-recentchangeslinked"><a href="/en/docs/Special:Recentchangeslinked/Gecko_DOM_Reference:Examples">Related changes</a></li>
		  			              			      				      				      				      				      				      				      			<li id="t-upload"><a href="/en/docs/Special:Upload">Upload file</a></li>	      				      			<li id="t-specialpages"><a href="/en/docs/Special:Specialpages">Special pages</a></li>	      				      				      			<li id="t-print"><a href="/en/docs/index.php?title=Gecko_DOM_Reference:Examples&amp;printable=yes">Printable version</a></li>
	      				    		</ul>
	    	</div>
		</div>

		<!-- LANGUAGE LINKS -->
				<div class="pagetools">
			<div>
				<h3>In other languages</h3>
				<ul>
									<li>
					<a href="http://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko:Ejemplos">Español</a>
					</li>
									<li>
					<a href="http://developer.mozilla.org/fr/docs/R%C3%A9f%C3%A9rence_du_DOM_Gecko:Exemples">Français</a>
					</li>
									<li>
					<a href="http://developer.mozilla.org/ja/docs/Gecko_DOM_Reference:Examples">日本語</a>
					</li>
									<li>
					<a href="http://developer.mozilla.org/pl/docs/Dokumentacja_Gecko_DOM:Przyk%C5%82ady_u%C5%BCycia_DOM">Polski</a>
					</li>
								</ul>
			</div>
		</div>
		
		</div>
		</div>
	</div><!-- END SIDEBAR -->

	<div id="content">
		<div class="article">
		<a name="top" id="contentTop"></a>
				<h1 class="firstHeading">Gecko DOM Reference:Examples</h1>
			<h3 id="siteSub">From MDC</h3>
			<div id="contentSub"></div>
												

				<div class='breadcrumbs'><a class='breadcrumbs' href='/en/docs/Main_Page'>Main Page</a> &gt; <a class='breadcrumbs' href='/en/docs/Gecko_DOM_Reference'>Gecko DOM Reference</a> &gt; <span class='breadcrumbs'>Examples</span></div>
<p>&laquo; <a href="/en/docs/Gecko_DOM_Reference" title="Gecko DOM Reference">Gecko DOM Reference</a>
</p><p>This chapter provides some longer examples of web and XML development using the DOM. Wherever possible, the examples use common APIs, tricks, and patterns in JavaScript for manipulating the document object.
</p>
<table id='toc' class='toc'><tr><td><div id='toctitle'><h2>Contents</h2></div>
<ul>
<li class='toclevel-1'><a href="#Example_1:_height_and_width"><span class="tocnumber">1</span> <span class="toctext">Example 1: height and width</span></a></li>
<li class='toclevel-1'><a href="#Example_2:_Image_Attributes"><span class="tocnumber">2</span> <span class="toctext">Example 2: Image Attributes</span></a></li>
<li class='toclevel-1'><a href="#Example_3:_Manipulating_Styles"><span class="tocnumber">3</span> <span class="toctext">Example 3: Manipulating Styles</span></a></li>
<li class='toclevel-1'><a href="#Example_4:_Using_Stylesheets"><span class="tocnumber">4</span> <span class="toctext">Example 4: Using Stylesheets</span></a></li>
<li class='toclevel-1'><a href="#Example_5:_Event_Propagation"><span class="tocnumber">5</span> <span class="toctext">Example 5: Event Propagation</span></a></li>
<li class='toclevel-1'><a href="#Example_6:_getComputedStyle"><span class="tocnumber">6</span> <span class="toctext">Example 6: getComputedStyle</span></a></li>
<li class='toclevel-1'><a href="#Example_7:_Displaying_Event_Object_Properties"><span class="tocnumber">7</span> <span class="toctext">Example 7: Displaying Event Object Properties</span></a></li>
<li class='toclevel-1'><a href="#Example_8:_Using_the_DOM_Table_Interface"><span class="tocnumber">8</span> <span class="toctext">Example 8: Using the DOM Table Interface</span></a>
<ul>
<li class='toclevel-2'><a href="#Notes"><span class="tocnumber">8.1</span> <span class="toctext">Notes</span></a></li>
</ul>
</li>
</ul>
</td></tr></table>
<p><script type="text/javascript"> if (window.showTocToggle) { var tocShowText = "show"; var tocHideText = "hide"; showTocToggle(); } </script>
</p>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="/en/docs/index.php?title=Gecko_DOM_Reference:Examples&amp;action=edit&amp;section=1" title="Gecko DOM Reference:Examples">edit</a>]</div><a name="Example_1:_height_and_width"></a><h2> Example 1: height and width </h2>
<p>The following example shows the use of the <code>height</code> and <code>width</code> properties alongside images of varying dimensions:
</p>
<pre>
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot;
&quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;

&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
&lt;title&gt;width/height example&lt;/title&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
function init()
{
  var arrImages = new Array(3);
  arrImages[0] = document.getElementById(&quot;image1&quot;);
  arrImages[1] = document.getElementById(&quot;image2&quot;);
  arrImages[2] = document.getElementById(&quot;image3&quot;);
  var objOutput = document.getElementById(&quot;output&quot;);
  var strHtml = &quot;&lt;ul&gt;&quot;;
  for (var i = 0; i &lt; arrImages.length; i++)
    strHtml += &quot;&lt;li&gt;image&quot; + (i+1) + 
            &quot;: height=&quot; + arrImages[i].height + 
            &quot;, width=&quot; + arrImages[i].width + 
            &quot;, style.height=&quot; + arrImages[i].style.height + 
            &quot;, style.width=&quot; + arrImages[i].style.width + 
            &quot;&lt;\/li&gt;&quot;;
  strHtml += &quot;&lt;\/ul&gt;&quot;;
  objOutput.innerHTML = strHtml;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload=&quot;init();&quot;&gt;

&lt;p&gt;Image 1: no height, width, or style 
    &lt;img id=&quot;image1&quot; src=&quot;http://www.mozilla.org/images/mozilla-banner.gif&quot;&gt;
&lt;/p&gt;
&lt;p&gt;Image 2: height=&quot;50&quot;, width=&quot;500&quot;, but no style 
    &lt;img id=&quot;image2&quot; src=&quot;http://www.mozilla.org/images/mozilla-banner.gif&quot; 
         height=&quot;50&quot; width=&quot;500&quot;&gt;
&lt;/p&gt;
&lt;p&gt;Image 3: no height, width, but style=&quot;height: 50px; width: 500px;&quot;
    &lt;img id=&quot;image3&quot; src=&quot;http://www.mozilla.org/images/mozilla-banner.gif&quot; 
         style=&quot;height: 50px; width: 500px;&quot;&gt;
&lt;/p&gt;

&lt;div id=&quot;output&quot;&gt; &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p><code>height</code> and <code>width</code> are also properties of the <code>OBJECT</code> and <code>APPLET</code> elements.
</p>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="/en/docs/index.php?title=Gecko_DOM_Reference:Examples&amp;action=edit&amp;section=2" title="Gecko DOM Reference:Examples">edit</a>]</div><a name="Example_2:_Image_Attributes"></a><h2> Example 2: Image Attributes </h2>
<pre>
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot;
&quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;

&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
&lt;title&gt;Modifying an image border&lt;/title&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
function setBorderWidth(width) {
  document.getElementById(&quot;img1&quot;).style.borderWidth = width + &quot;px&quot;;
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;p&gt;
  &lt;img id=&quot;img1&quot; src=&quot;image1.gif&quot; style=&quot;border: 5px solid green;&quot; width=&quot;100&quot;
height=&quot;100&quot; alt=&quot;border test&quot;&gt;
&lt;/p&gt;

&lt;form name=&quot;FormName&quot;&gt;
  &lt;p&gt;&lt;input type=&quot;button&quot; value=&quot;Make border 20px-wide&quot; 
onclick=&quot;setBorderWidth(20);&quot;&gt; &lt;input type=&quot;button&quot; value=&quot;Make border 5px-wide&quot; 
onclick=&quot;setBorderWidth(5);&quot;&gt;&lt;/p&gt;
&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="/en/docs/index.php?title=Gecko_DOM_Reference:Examples&amp;action=edit&amp;section=3" title="Gecko DOM Reference:Examples">edit</a>]</div><a name="Example_3:_Manipulating_Styles"></a><h2> Example 3: Manipulating Styles </h2>
<p>In this simple example, some basic style properties of an HTML paragraph element are accessed using the style object on the element and that object's CSS style properties, which can be retrieved and set from the DOM. In this case, you are manipulating the individual styles directly. In the next example (see Example 4), you can use stylesheets and their rules to change styles for whole documents.
</p>
<pre>
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot;
&quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;

&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
&lt;title&gt;Changing color and font-size example&lt;/title&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
function changeText() {
	var p = document.getElementById(&quot;pid&quot;);
	p.style.color = &quot;blue&quot;
	p.style.fontSize = &quot;18pt&quot;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p id=&quot;pid&quot; 
onclick=&quot;window.location.href = 'http://www.cnn.com/';&quot;&gt;linker&lt;/p&gt;
&lt;form&gt;
&lt;p&gt;&lt;input value=&quot;rec&quot; type=&quot;button&quot; onclick=&quot;changeText();&quot;&gt;&lt;/p&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="/en/docs/index.php?title=Gecko_DOM_Reference:Examples&amp;action=edit&amp;section=4" title="Gecko DOM Reference:Examples">edit</a>]</div><a name="Example_4:_Using_Stylesheets"></a><h2>Example 4: Using Stylesheets</h2>
<p>The styleSheets property on the document object returns a list of the stylesheets that have been loaded on that document. You can access these stylesheets and their rules individually using the stylesheet, style, and CSSRule objects, as demonstrated in this example, which prints out all of the style rule selectors to the console.
</p>
<pre>
ss = document.styleSheets;
for(i=0; i&lt;ss.length; i++)
 {
 for(j=0; j&lt;ss[0].cssRules.length; j++)
  {
  dump( ss[i].cssRules[j].selectorText + &quot;\n&quot; );
  }
 }
</pre>
<p>For a document with a single stylesheet in which the following three rules are defined:
</p>
<pre>BODY { background-color: darkblue; }
P { font-face: Arial; font-size: 10pt; margin-left: .125in; }
#lumpy { display: none; }
</pre>
<p>This script outputs the following:
</p>
<pre>BODY
P
#LUMPY
</pre>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="/en/docs/index.php?title=Gecko_DOM_Reference:Examples&amp;action=edit&amp;section=5" title="Gecko DOM Reference:Examples">edit</a>]</div><a name="Example_5:_Event_Propagation"></a><h2>Example 5: Event Propagation</h2>
<p>This example demonstrates how events fire and are handled in the DOM in a very simple way. When the BODY of this HTML document loads, an event listener is registered with the top row of the TABLE. The event listener handles the event by executing the function stopEvent, which changes the value in the bottom cell of the table.
</p><p>However, stopEvent also calls an event object method, <a href="/en/docs/DOM:event.stopPropagation" title="DOM:event.stopPropagation">event.stopPropagation</a>, which keeps the event from bubbling any further up into the DOM. Note that the table itself has an <a href="/en/docs/DOM:element.onclick" title="DOM:element.onclick">onclick</a> event handler that ought to display a message when the table is clicked. But the stopEvent method has stopped propagation, and so after the data in the table is updated, the event phase is effectively ended, and an alert box is displayed to confirm this.
</p>
<pre>
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Event Propagation&lt;/title&gt;

&lt;style type=&quot;text/css&quot;&gt;
 #t-daddy { border: 1px solid red }
 #c1 { background-color: pink; }
&lt;/style&gt;

&lt;script type=&quot;text/javascript&quot;&gt;

function stopEvent(ev) {
  c2 = document.getElementById(&quot;c2&quot;);
  c2.innerHTML = &quot;hello&quot;;

  // this ought to keep t-daddy from getting the click.
  ev.stopPropagation();
  alert(&quot;event propagation halted.&quot;);
}

function load() {
  elem = document.getElementById(&quot;tbl1&quot;);
  elem.addEventListener(&quot;click&quot;, stopEvent, false);
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body onload=&quot;load();&quot;&gt;

&lt;table id=&quot;t-daddy&quot; onclick=&quot;alert('hi');&quot;&gt;
 &lt;tr id=&quot;tbl1&quot;&gt;
  &lt;td id=&quot;c1&quot;&gt;one&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
  &lt;td id=&quot;c2&quot;&gt;two&lt;/td&gt;
 &lt;/tr&gt;
&lt;/table&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="/en/docs/index.php?title=Gecko_DOM_Reference:Examples&amp;action=edit&amp;section=6" title="Gecko DOM Reference:Examples">edit</a>]</div><a name="Example_6:_getComputedStyle"></a><h2>Example 6: getComputedStyle</h2>
<p>This example demonstrates how the <a href="/en/docs/DOM:window.getComputedStyle" title="DOM:window.getComputedStyle">window.getComputedStyle</a> method can be used to get the styles of an element that are not set using the <code>style</code> attribute or with JavaScript (e.g., <code>elt.style.backgroundColor="rgb(173, 216, 230)"</code>). These latter types of styles can be retrieved with the more direct <a href="/en/docs/DOM:element.style" title="DOM:element.style">elt.style</a> property, whose properties are listed in the <a href="/en/docs/DOM:CSS" title="DOM:CSS">DOM CSS Properties List</a>.
</p><p><code>getComputedStyle()</code> returns a <code>ComputedCSSStyleDeclaration</code> object, whose individual style properties can be referenced with this object's <code>getPropertyValue()</code> method, as the following example document shows.
</p>
<pre>
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot;
&quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;

&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
 &lt;title&gt;getComputedStyle example&lt;/title&gt;

 &lt;script type=&quot;text/javascript&quot;&gt;
   function cStyles() 
  {
   var RefDiv = document.getElementById(&quot;d1&quot;);

   var txtHeight = document.getElementById(&quot;t1&quot;);
   var h_style = 
document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue(&quot;height&quot;);
   txtHeight.value = h_style;

   var txtWidth = document.getElementById(&quot;t2&quot;);
   var w_style = 
document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue(&quot;width&quot;);
   txtWidth.value = w_style;

   var txtBackgroundColor = document.getElementById(&quot;t3&quot;);
   var b_style = 
document.defaultView.getComputedStyle(RefDiv,
null).getPropertyValue(&quot;background-color&quot;);
   txtBackgroundColor.value = b_style;
  }
 &lt;/script&gt;

 &lt;style type=&quot;text/css&quot;&gt;
   #d1 { margin-left: 10px; background-color: rgb(173, 216, 230); 
height: 20px; max-width: 20px; }
 &lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div id=&quot;d1&quot;&gt;&amp;nbsp;&lt;/div&gt;

&lt;form action=&quot;&quot;&gt;
&lt;p&gt;&lt;button type=&quot;button&quot; onclick=&quot;cStyles();&quot;&gt;getComputedStyle&lt;/button&gt;
  height&lt;input id=&quot;t1&quot; type=&quot;text&quot; value=&quot;1&quot;&gt;
  max-width&lt;input id=&quot;t2&quot; type=&quot;text&quot; value=&quot;2&quot;&gt;
  bg-color&lt;input id=&quot;t3&quot; type=&quot;text&quot; value=&quot;3&quot;&gt;&lt;/p&gt;
&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="/en/docs/index.php?title=Gecko_DOM_Reference:Examples&amp;action=edit&amp;section=7" title="Gecko DOM Reference:Examples">edit</a>]</div><a name="Example_7:_Displaying_Event_Object_Properties"></a><h2>Example 7: Displaying Event Object Properties</h2>
<p>This example uses DOM methods to display all the properties of the <a href="/en/docs/DOM:window.onload" title="DOM:window.onload">window.onload</a> <a href="/en/docs/DOM:event" title="DOM:event">event</a> object and their values in a table. It also shows a useful technique of using a for..in loop to iterate over the properties of an object to get their values.
</p><p>The properties of event objects differs greatly between browsers, the <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html" class='external text' title="http://www.w3.org/TR/DOM-Level-2-Events/events.html" rel="nofollow">W3C DOM 2 Events Specification</a> lists the standard properties, however many browsers have extended these greatly.
</p><p>Put the following code into a blank text file and load it into a variety of browsers, you'll be surprised at the different number and names of properties.  You might also like to add some elements in the page and call this function from different event handlers.
</p>
<pre>
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot;
   &quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;

&lt;title&gt;Show Event properties&lt;/title&gt;

&lt;style type=&quot;text/css&quot;&gt;
  table {border-collapse: collapse;}
  thead {font-weight: bold;}
  td {padding: 2px 10px 2px 10px;}
  .odd {background-color: #efdfef;}
  .even {background-color: #ffffff;}
&lt;/style&gt;

&lt;script type=&quot;text/javascript&quot;&gt;

function showEventProperties(e)
{
  function addCell(row, text) {
    var cell = row.insertCell(-1);
    cell.appendChild(document.createTextNode(text));
  }

  var e = e || window.event;
  document.getElementById('eventType').innerHTML = e.type;

  var table = document.createElement('table');
  var thead = table.createTHead();
  var row = thead.insertRow(-1);
  var lableList = ['#', 'Property', 'Value'];
  var len = lableList.length;

  for (var i=0; i&lt;len; i++) { 
    addCell(row, lableList[i]);
  }

  var tbody = document.createElement('tbody');
  table.appendChild(tbody);

  for (var p in e) {
    row = tbody.insertRow(-1);
    row.className = (row.rowIndex % 2)? 'odd':'even';
    addCell(row, row.rowIndex);
    addCell(row, p);
    addCell(row, e[p]);
  }

  document.body.appendChild(table);
}
window.onload = function(event){
  showEventProperties(event);
}
&lt;/script&gt;

&lt;h1&gt;Properties of the DOM &lt;span id=&quot;eventType&quot;&gt;&lt;/span&gt; Event Object&lt;/h1&gt;
</pre>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="/en/docs/index.php?title=Gecko_DOM_Reference:Examples&amp;action=edit&amp;section=8" title="Gecko DOM Reference:Examples">edit</a>]</div><a name="Example_8:_Using_the_DOM_Table_Interface"></a><h2>Example 8: Using the DOM Table Interface</h2>
<p>The DOM HTMLTableElement interface provides some convenience methods for creating and manipulating tables.  Two frequently used methods are <code><a href="/en/docs/DOM:table.insertRow" title="DOM:table.insertRow">table.insertRow</a></code> and <code><a href="/en/docs/index.php?title=DOM:table:row.insertCell&amp;action=edit" class="new" title="DOM:table:row.insertCell">row.insertCell</a></code>.
</p><p>To add a row and some cells to an existing table:
</p>
<pre>
&lt;table id=&quot;table0&quot;&gt;
 &lt;tr&gt;
  &lt;td&gt;Row 0 Cell 0&lt;/td&gt;
  &lt;td&gt;Row 0 Cell 1&lt;/td&gt;
 &lt;/tr&gt;
&lt;/table&gt;

&lt;script type=&quot;text/javascript&quot;&gt;

var table = document.getElementById('table0');
var row = table.insertRow(-1);
var cell, text;
for (var i=0; i&lt;2; i++) {
  cell = row.insertCell(-1);
  text = 'Row ' + row.rowIndex + ' Cell ' + i;
  cell.appendChild(document.createTextNode(text));
}

&lt;/script&gt;
</pre>  
<div class="editsection" style="float:right;margin-left:5px;">[<a href="/en/docs/index.php?title=Gecko_DOM_Reference:Examples&amp;action=edit&amp;section=9" title="Gecko DOM Reference:Examples">edit</a>]</div><a name="Notes"></a><h3>Notes</h3>
<ul><li> A table's <code><a href="/en/docs/DOM:element.innerHTML" title="DOM:element.innerHTML">innerHTML</a></code> property should never be used to modify a table, although you can use it to write an entire table or the content of a cell.
</li><li> If  DOM Core methods <code><a href="/en/docs/DOM:document.createElement" title="DOM:document.createElement">document.createElement</a></code> and <code><a href="/en/docs/DOM:element.appendChild" title="DOM:element.appendChild">element.appendChild</a></code> are used to create rows and cells, IE requires that they are appended to a tbody element, whereas other browsers will allow appending to a table element (the rows will be added to the last tbody element).
</li><li> There are a number of other convenience methods belonging to the <a href="/en/docs/DOM:table#Methods" title="DOM:table">table interface</a> that can be used for creating and modifying tables.
</li></ul>

<!-- Saved in parser cache with key wiki_mdc:pcache:idhash:2640-0!1!0!0!!en!2 and timestamp 20070417204723 -->
<div class="printfooter">
Retrieved from "<a href="http://developer.mozilla.org/en/docs/Gecko_DOM_Reference:Examples">http://developer.mozilla.org/en/docs/Gecko_DOM_Reference:Examples</a>"</div>
				<div id="catlinks"><p class='catlinks'><a href="/en/docs/index.php?title=Special:Categories&amp;article=Gecko_DOM_Reference%3AExamples" title="Special:Categories">Categories</a>: <a href="/en/docs/Category:Gecko_DOM_Reference" title="Category:Gecko DOM Reference">Gecko DOM Reference</a> | <a href="/en/docs/Category:DOM" title="Category:DOM">DOM</a></p></div>		
			
		</div>
	</div> <!-- end id content -->


      <div id="footer">
		<ul>
	  		<li id="f-lastmod"> This page was last modified 18:59, 3 April 2007.</li>	  		<li id="f-viewcount">This page has been accessed 73,890 times.</li>		</ul>
		<ul>
	  			  			  		<li id="f-copyright">Content is available under <a href="/en/docs/MDC:Copyrights" title="MDC:Copyrights">these licenses</a>.</li>	  		<li id="f-about"><a href="/en/docs/MDC:About" title="MDC:About">About MDC</a></li>	  				</ul>
	  </div>
    </div> <!-- end id page -->
	</div> <!-- end id container -->
	
    <!-- Served by giles in 0.39 secs. -->  </body>
</html>
