Display attributet och JavaScript

Jag har följande css-deklarationer på sidan:

<style type="text/css" media="screen">
html, body {
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
	background-color: #ffffff;

	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	line-height: 1.1em;
	font-weight: normal;
	color: #555555;
	text-decoration: none;
}
#main {
	margin: 0px;
	padding: 5px 0px 5px 0px;
}
#left {
	float: left;
	width: 200px;
	margin: 0px;
	padding: 0px;
	display: block; /* Visst har jag deklarerat display attributet
}
#holder {
	margin: 0px 215px 0px 215px;
	padding: 0px 3px 0px 3px;
}
#right {
	float: right;
	width: 200px;
	margin: 0px;
	padding: 0px;
	display: block; /* Samma här.
}
</style>

Så här ser div-koden ut. När man klickar på en länk anropas en javascript funktion som ska till att börja med 'alerta' display deklarationen för den valda diven. Problemet är att enligt Javascriptet så finns det ingen display attribut deklarerad för left och right diven.

<div id="main">
	<div id="left">Left menu</div>
	<div id="right">Right menu</div>
	<div id="holder"></div>
</div>

Javascript koden:

function hide(menuId){
	var menu = document.getElementById(menuId);

	alert(menu.style.display);
}

Om jag däremot skriver style attributet direkt i div-taggen så fungerar det.

<div id="main">
	<div id="left" style="display: block;">Left menu</div>
	<div id="right" style="display: block;">Right menu</div>
	<div id="holder"></div>
</div>

Någon som kan förklara fenomenet för mig?

Det är riktigt. Enligt DOM är display ingenting när det är synligt och "none" när det är osynligt.

function hide(menuId){
	var menu = document.getElementById(menuId);

	alert(menu.style.display);

	if(menu.style.display=="none"){
		menu.style.display="";
	}
	else{
		menu.style.display="none";
	}
}

Njae... Tror att du missförstod mig lite här.

Om jag deklarerar display: block i css-filen så får jag bara en tom alert-ruta när jag försöker visa värdet som display attributet har.

Om jag däremot definerar style attributet direkt i div-taggen så står det "block" i alert-rutan.

Det var det jag tyckte var konstigt. Det ska väl inte finnas någon skillnad mellan style-attributet som defineras dirrekt i taggen och externa css-definitionerna.

Samma gäller för margin t ex. Om du ska hämta margin som defineras externt så går det inte. Är inte det konstigt?

Nu är ju inte detta något stor problem men irriterande är det iaf.

Så är det och det är helt värdelöst, men det finns säkert en logisk orsak till varför det är så. Du kan undkomma detta genom att skriva style-taggar till de element som är inblandade, eller så använder du currentStyle-objektet som fungerar i Internet Explorer. Huruvida det finns någon motsvarighet till objektet i de andra webläsarna vet jag inte.