I won't be able to provide you example using getters and setters under my OPERA browser. But here's a little program that allows you to set display properties from any elements' inside your page:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Window-target" content="_top">
<title>Free Live Help!</title>
<style type="text/css">
<!--
a { display : inline-block; margin-top : .100em; margin-left : 1em; color : #405060; padding : .200em 0 .200em 0; text-decoration : none; border-bottom : 1px dotted; }
div { margin-top : .500em; border : 1px solid #ccc; padding : .300em; background-color : #eee; }
div div { margin-top : .150em; border : 1px solid #405060; background-color : #ccc; padding : .150em; }
-->
</style>
<script type="text/javascript">
<!--
var hideAndDisplay = function( parentID ) {
this.ids = (( document.getElementById ) ? document.getElementById( parentID ) : document.all[ parentID ] );
this.tName = (( this.ids.nodeName ) ? this.ids.nodeName : this.ids.tagName ).toLowerCase();
this.elem = (( document.getElementsByTagName ) ? document.getElementsByTagName( this.tName )[ parentID ] : document.all.tags( this.tName ).item( parentID ));
};
hideAndDisplay.prototype = {
display : function( thisTagNames, displayProp, thisID ) {
this.divs = (( document.getElementsByTagName ) ? this.elem.getElementsByTagName( thisTagNames ) : this.elem.all.tags( thisTagNames ));
if ( typeof( thisID ) !== "undefined" ) {
try {
this.divs[ thisID ].style.display = displayProp;
} catch( e ) {
this.divs[ thisID ].setAttribute( "style", "display : " + displayProp );
} return;
} else {
try {
this.elem.style.display = displayProp;
} catch( e0 ) {
this.elem.setAttribute( "style", "display : " + displayProp );
} return;
}
}
}; var $ = function( myDivID, myNodeList, showHideProp, index ) {
var eLem = new hideAndDisplay( myDivID );
eLem.display( myNodeList, showHideProp, index );
return;
};
window.onload = function() {
/* $ Function syntax :
$( [ String [, String [, String [, Integer/String ]]]] );
The $() Function comes with four parameters:
1st parameter - ID of the parent ELEMENT that serves as a place holder for the elements' ( or nodeList ) collection. ( REQUIRED ).
2nd parameter - Element reference, ( or Tag Name ) of the element that will be showed/hide from the page ( REQUIRED ).
3rd parameter - display properties ( REQUIRED ).
4th parameter - Specify the Index reference ( or element ID ) that will be showed/hide from the page ( OPTIONAL ).
Example of usage : */
$( "div1", "div", "none" ); // By not specifying its 4th parameter, div1 ( 1st parameter, PARENT ELEMENT ) will be set to display as ( 3rd parameter - none ).
var elemArray = [ 0, 2, 4 ];
for ( var i = 0; i < elemArray.length; i++ ) {
$( "div2", "div", "none", elemArray[ i ] ); // Creating arrays of index for the elements inside div2.
}
};
// -->
</script>
</head>
<body>
<div id="div1">
<!-- This entire collection of elements will not be showed -->
<div>Div1 #1</div>
<div>Div1 #2</div>
<div>Div1 #3</div>
<div>Div1 #4</div>
<div>Div1 #5</div>
</div>
<div id="div2">
<!-- element1, element3 and element5 will not be showed -->
<div>Div2 #1</div>
<div>Div2 #2</div>
<div>Div2 #3</div>
<div>Div2 #4</div>
<div>Div2 #5</div>
</div>
<div id="nav">
<h6 style="padding-left : 1em; color : #808080; margin-bottom : 0;">- Control Panel -</h6>
<!-- Controlling display properties of the element using $() function -->
<a href="javascript:void(0)" onclick="$( 'div1', 'div', 'block' )">Show Div1 and all its element</a><br>
<a href="javascript:void(0)" onclick="$( 'div2', 'div', 'block', 0 )">Show Div2 and element#1</a><br>
<a href="javascript:void(0)" onclick="$( 'div2', 'div', 'block', 2 )">Show Div2 and element#3</a><br>
<a href="javascript:void(0)" onclick="$( 'div2', 'div', 'block', 4 )">Show Div2 and element#5</a><br>
<a href="javascript:void(0)" onclick="$( 'nav', 'a', 'none' )">Hide Control Panel [ x ]</a>
</div>
</body>
</html>
hope it helps...
