Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS/CSS] zmiana w stylu
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
zuraw84
witam,
mam klase css

  1. .klasa{
  2. border: 0px;
  3. }


i jakies pole

  1. <input type="text" class="klasa" />


potrzebuje teraz przez javascript zmienic w klasie css wartosc border powiedzmy na 1px
i teraz tak:
to jest tylko porsty przyklad czego potrzebuje,musze to zmienic w klasie css
bo tych elementow ktore kozystaja z tej klasy jest duzo ... i ciezko by bylo sie
po nich iterowac
czy jest wogole mozliwosc edycji klas css przez javascript ?

dzieki za pomoc
nospor
style.border=.... :
  1. <input id="test" class="klasa"/>
  2. <a href="#" onclick="document.getElementById('test').style.border='1px solid black';return false;">zmien border</a>
zuraw84
Cytat(nospor @ 9.10.2007, 08:27:27 ) *
style.border=.... :
  1. <input id="test" class="klasa"/>
  2. <a href="#" onclick="document.getElementById('test').style.border='1px solid black';return false;">zmien border</a>


ok, ale tego wlasnie chcialem uniknac
bo majac 1000 elementow musial bym kazdemu id nadawac
a jak bym mogl dostac sie do klasy css zmienil bym to tylko w jednym miejscu
jarrod
No to masz problem...
Nie zmienisz zawartości arkusza tak aby wszystkie elementy przyjęły nową wartość.
Nadaj każdemu z grupy elementów taki sam atrybut np rel

Teraz napisz skrypt JS który zmieni właściwość dla każdego elementu który ma rel o jakiejśtam wartości np:

  1. <script type="text/javascript">
  2. function _zmien()
  3. {
  4. var kolekcja = document.getElementsByTagName('input');
  5. for(i=0;i<kolekcja.length;i++)
  6. {
  7. if( kolekcja[i].getAttribute('rel') == 'abc' )
  8. {
  9. kolekcja[i].style.border = '1px #c00 solid';
  10. }
  11. }
  12. }
  13.  
  14. <input type="text" name="jeden" rel="abc" onfocus="_zmien()" />
  15. <input type="text" name="dwa" rel="abc" onfocus="_zmien()"/>


Tu masz taki mały przykład. Pisany z palca więc może coś nie działać ale coś w tym kierunku.
zuraw84
oki,
wielkie dzieki za przyklad
szkoda ze nie mozna arkusza edytowac,
tak sadzilem ze tego nie da sie inaczej zrobic niz iteracja po elementach
dzieki
nevt
Możesz przygotować kilka wersji arkusza i w JavaScript decydować która wersja ma się załadować dla stronki... Ale to zadziała tylko przy ładowaniu stronki...

Pozdrawiam.
vokiel
Żeby było można zmienić inne właściwości i nie grzebać potem w js proponuję zrobić tak:
  1. .klasa{
  2. border: 0px;
  3. }
  4. .klasa_po_zmianie{
  5. border: 0px;
  6. }


a w js od jarrod
  1. kolekcja[i].className = "klasa_po_zmianie";


Wtedy będzie łatwiej dokonać jakiś zmian w wyglądzie.

btw @jarrod niezły pomysł, i like it smile.gif
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.