Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] .style.left nie ma wartosci
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
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:
  1. <div class="darkenBackground" id="zaslona"><img style="margin-left: 200px;" src="grafa/progress0.gif" align="center" /></div>
  2. <!--
  3. visible_hide();
  4. -->
  5. <div id="box_items">
  6. {include_php file='ajax/items_list.php'}
  7. </div>


JS:
  1. function visible_hide() {
  2. if (document.getElementById) { // DOM3 = IE5, NS6
  3. document.getElementById('zaslona').style.visibility = 'hidden';
  4. }
  5. else {
  6. if (document.layers) { // Netscape 4
  7. document.zaslona.visibility = 'hidden';
  8. }
  9. else { // IE 4
  10. document.all.zaslona.style.visibility = 'hidden';
  11. }
  12. }
  13. }
  14.  
  15. function visible_show() {
  16. if (document.getElementById) { // DOM3 = IE5, NS6
  17. document.getElementById('zaslona').style.visibility = '';
  18. alert(document.getElementById("box_items").style.left);
  19. }
  20. else {
  21. if (document.layers) { // Netscape 4
  22. document.zaslona.visibility = '';
  23. }
  24. else { // IE 4
  25. document.all.zaslona.style.visibility = '';
  26. }
  27. }
  28. }
  29.  
  30. function items_list_zmien_wyglad(c_id, zmienna, wartosc){
  31. visible_show();
  32.  
  33. var req = mint.Request();
  34. req.Send("ajax/items_list.php?c_id="+c_id+"&"+zmienna+"="+wartosc, "box_items");
  35.  
  36. visible_hide();
  37. }


  1. .darkenBackground {
  2. background-color: rgb(220, 220, 220);
  3. opacity: 0.7; /* Safari, Opera */
  4. -moz-opacity:0.70; /* FireFox */
  5. filter: alpha(opacity=70); /* IE */
  6. z-index: 20;
  7. height: 70%;
  8. width: 70%;
  9. background-repeat:repeat;
  10. position:absolute;
  11. top: 450px;
  12. left: 300px;
  13. }


Pytanie: Jak przepisać te wartosci. A moze wgole jest jakiś prostszy sposób.
nospor
nie .style.left
a: .offsetLeft
analogicznie reszta
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.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.