JS edytuje CSS.

0

Mam mały problem. Potrzebuje w kilku divach uzależnić ich szerokość od rozdzielczosci ekranu na którym strona jest wyswietlana. Mam niesmiertelny kod JS:

		
<script language="javascript" type="text/javascript">
var W = screen.width;
document.div1.width = W;
document.div2.width = W;
document.div3.width = W;
</script>

i nawet bangla. Jednak problem pojawia się bo chciałbym jeszcze ustawić dla div2 left=rozdzielczosc.Prosta sprawa, ale że ja JS cienko znam to mam problem. Wiem już że na pewno document.div3.left=W nie przejdzie. Jak to napisać?

0

div.style.left

0

Nie wiem co robie nie tak, ale nie działa. Mam trzy divy (div1,div2,div3). Chciałbym, żeby JS wczytał szerokosc rozdzielczosci ekranu do jakiejś zmiennej W i przypisał:
-div1 (width:W)
-div2 (width:W, left:W)
-div3 (width:W, left:2*W)

Próbowałem tak:

<script language="javascript" type="text/javascript">
var W = screen.width;
document.div1.width=W;
document.div2.width=W;
document.div3.width=W;
document.div2.left=W;
document.div3.left=2*W;
</script>

i tak:

<script language="javascript" type="text/javascript">
var W = screen.width;
div1.style.width=W;
div2.style.width=W;
div3.style.width=W;
div2.style.left=W;
div3.style.left=2*W;
</script>

Nie znam dobrze nawet skladni JS. Nie wiem kompletnie gdzie robie blad. co ciekawe jak dopisuje do kodu document.write(W); by sprawdzic dzialanie tej fkcji screen.width to skrypt i tak nic nie drukuje.
Pomocy!

0

pytanie być może niepotrzebne, ale informacja jak najbardziej wymagana.
nadajesz w cssie tym divom

div {position:absolute;}

lub position:relative;?

0

Divy są na absolute. (Wiem, to nie do konca dobre rozwiązanie, ale z racji dość nietypowego interface'u optymalne.)
Mam w cssie nawet wpisane wartości dla mojej rozdzielczości (i śmiga!), ale potrzebuje by ta wartość pobierała sie dynamicznie.
Wrzuciłem kod js do <body> (a moze jednak <head>?) a width i left w cssie wziąłem w komentarze.

0

właściwie ważne jest to, żeby tej kod javascript, który podałeś (odczytujący rozdzielczość) był (najlepiej) na samym końcu, a konkretniej to na pewno po tych divach, spróbuj to,
to jest to samo jakbys napisał

<body onload="(function(){alert(document.getElementById('div1').screen.width);})()">

document.body.addEventListener ("load",function()
{var W = screen.width;
div1.style.width=W;
div2.style.width=W;
div3.style.width=W;
div2.style.left=W;
div3.style.left=2*W;}
,false);
0

Nie należy zapominać o jednostkach. Wszelkie wielkości trzeba podać w postaci stringa, np.

var w = screen.width; // w zmiennej 'w' będzie np. 1024
div.style.width = w + "px"; // <- tutaj dodajemy jednostkę 1024px
0

Dzięki za pomoc, ale cały czas bez zmian.
Do czego doszedłem:
-Fcja screen.width; działa świetnie. Document.write(W) - zwraca szerokosc ekranu.
-Nie działa przypisanie div1.style.width=... . I to nie ważne czy w miejscu tych kropek wstawie W+"px" (/dzięki Panie Kubo za słuszną uwage) czy nawet "1000px".

Spróbowałbym obejsc to przypisanie i w związku z tym mam dwa pytania:
a) Czy jest mozliwosc wykonywania JS w arkuszu css? (podejrzewam, że nie).
b) Czy jest możliwość napisania takiego kodu JS który wstawiony w miejsce:

<div class="div1" style="width:(KOD JS)px;"
zwracałby tylko wartość rozdzielczości? Jak to napisać? Zwykłym document.write?
0

Bo co to niby jest div1, div2 i div3? style... tego nie powinno się zmieniać z poziomu JS. Do tego zapewniam Cię, że to nie jest takie proste jak Ci się wydaje...

Jak chcesz zmieniać style konkretnym elementów, to...

<div class="div1" id="div1" ...

div1 = document.getElementById("div1");
div1.style.left = '666px';
0

dobra, wykładam kawę na ławę. najwidoczniej nie przeczytałeś pierwszego zdania mojego postu.
napisalem:

właściwie ważne jest to, żeby tej kod javascript, który podałeś (odczytujący rozdzielczość) był (najlepiej) na samym końcu

rozważmy dwa fragmentu:

<html><head><script>
setTimeout(function(){alert('error');document.getElementById('deav').style.width=screen.width;},1000);
//(function(){alert('error');document.getElementById('deav').style.width=screen.width;})();
</script></head><body>
<div style="position:absolute;border: solid 1px red;" id="deav">habueh</div>
</body>

<html><head><script>
//setTimeout(function(){alert('error');document.getElementById('deav').style.width=screen.width;},1000);
(function(){alert('error');document.getElementById('deav').style.width=screen.width;})();
</script></head><body>
<div style="position:absolute;border: solid 1px red;" id="deav">habueh</div>
</body>

jeśli nie wiesz, który zadziała na pewno poprawnie, to odpowiadam:
zadziała ten z timeoutem, poniewaz kod javascript jest wywolywany zaraz po znalezieniu tagu zamykajacego go, a wówczas nawet nie istnieje jeszcze div#deav.

1 użytkowników online, w tym zalogowanych: 0, gości: 1