[JS] .style.left nie ma wartosci Opcje

[Tibod]

Witam,

Taki mały problem. Chcę zrobić div-a (zaslona) zasłaniającego cześciowo listę towarów (div: box_items) podczas wczytywania nowych produktów. Korzystam z mintAjax a, ale on dziala dobrze. Natomiast nie moge zmienić rozmiaru div-a zaslona na odpowiedni do wielkosci div-a box_items. Wartosci left, top itd. maja wartosci 0. Testuje na FF i IE7 przy użyciu alert.

Strona:

[HTML] pobierz, plaintext 
<div class="darkenBackground" id="zaslona"><img style="margin-left: 200px;" src="grafa/progress0.gif" align="center" /></div>
<script>
<!--
	visible_hide();
-->
</script>
<div id="box_items">
	{include_php file='ajax/items_list.php'}
</div>
[HTML] pobierz, plaintext 

JS:

[HTML] pobierz, plaintext 
function visible_hide() {
	if (document.getElementById) {  // DOM3 = IE5, NS6
		document.getElementById('zaslona').style.visibility = 'hidden';
	}
	else {
		if (document.layers) {  // Netscape 4
			document.zaslona.visibility = 'hidden';
		}
		else {  // IE 4
			document.all.zaslona.style.visibility = 'hidden';
	    }
	}
}
 
function visible_show() {
	if (document.getElementById) {  // DOM3 = IE5, NS6
		document.getElementById('zaslona').style.visibility = '';
		alert(document.getElementById("box_items").style.left);
	}
	else {
		if (document.layers) {  // Netscape 4
			document.zaslona.visibility = '';
		}
		else {  // IE 4
			document.all.zaslona.style.visibility = '';
	    }
	}
}
 
function items_list_zmien_wyglad(c_id, zmienna, wartosc){
	visible_show();
 
        var req = mint.Request();
        req.Send("ajax/items_list.php?c_id="+c_id+"&"+zmienna+"="+wartosc, "box_items");
 
	visible_hide();
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
.darkenBackground {
	background-color: rgb(220, 220, 220);
	opacity: 0.7; /* Safari, Opera */
	-moz-opacity:0.70; /* FireFox */
	filter: alpha(opacity=70); /* IE */
	z-index: 20;
	height: 70%;
	width: 70%;
	background-repeat:repeat;
	position:absolute;
	top: 450px;
	left: 300px;
}
[HTML] pobierz, plaintext 

Pytanie: Jak przepisać te wartosci. A moze wgole jest jakiś prostszy sposób.

[nevt]

atrybut element.style w JS jest odniesieniem do property style w znaczniku HTML (np. <div style="left:10px">). nie ma nic wspólnego z własnościami wynikającymi z arkusza stylów CSS, ale ma (zgodnie z regułami HTML/CSS) priorytet nad właściwościami określonymi w arkuszu stylów. możesz to rozwiązać na kilka sposobów:

1. przenieść potrzebne ci dane z arkusza CSS bezpośrednio do property style w HTML.

2. jeżeli pierwszy odczyt atrybutu w JS nie zgadza sie z oczekiwaniami - przypisać mu odpowiednią wartość.

ale obie te metody powodują, że tracisz separację warwy logiki i prezentacji, tzn. zmieniając coś w kodzie CSS musisz też aktualizować kod HTML / PHP /JS. zatem najlepszym rozwiązniem wydaje się:

3. zdefiniować dwa style w CSS, odpowiednio np. 'show' i 'hide', a w JS przełączać atrybut element.className

powodzenia.