Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: odwołanie do wszystkich elementow danej klasy
Forum PHP.pl > Forum > Po stronie przeglądarki
1maciek
witam,
czy istnieje sposob odwolania sie do wszystkich elementow z tej samej klasy?
przyklad:
  1. <div class="a">aaa</div>
  2. <div class="a">bbb</div>
  3. <div class="a">ccc</div>

proszę używać poprawnego bbcode
poprawiam
revyag

chcialbym jednym poleceniem zmienic np. kolor tekstu we wszystkich divach, wszystkie sa w tej samej klasie, wiec podejrzewam ze jest na to jakis sposob, niechcialbym nadawac im id bo jesli bedzie ich 100 to robi sie problem
z gory wielkie dzieki za wszystkie sugestie
pozdrawiam
revyag
Możesz tak:
Kod
<script type="text/javascript">
function col() {
    cont = document.getElementById("cont").childNodes;
    for(i = 0; i < cont.length; i++) {
        if(cont[i].className == 'a') {
            cont[i].className = 'b';
        }
    }
}
</script>

Kod
<style type="text/css">
div.a {
    color:red;
}
div.b {
    color:blue;
}
</style>

  1. <div id="cont">
  2. <div class="a">aaa</div>
  3. <div class="a">bbb</div>
  4. <div class="a">ccc</div>
  5. </div>
  6. <button onclick="col()">col</button>
1maciek
mogloby byc ale, co jesli bedzie tak
  1. <div id="cont1">
  2. <div class="a">aaa</div>
  3. <div class="a">bbb</div>
  4. <div class="a">ccc</div>
  5. </div>
  6. <!-- tutaj jakis kod -->
  7. <div id="cont2">
  8. <div class="a">aaa</div>
  9. <div class="a">bbb</div>
  10. <div class="a">ccc</div>
  11. </div>
  12. <!-- tu znowu inny kod -->
  13. <div id="cont3">
  14. <div class="a">aaa</div>
  15. <div class="a">bbb</div>
  16. <div class="a">ccc</div>
  17. </div>
  18. <!-- itd -->

a tych zawnetrznych divow bedzie bardzo duzo, a ja chcialbym zmienic wszystkie divy z klasy "a".
revyag
Możesz dodać paramter do funkcji js, bedący wskaźnikiem na dany kontener
Kod
<script type="text/javascript">
function col(cont) {
   cont = document.getElementById(cont).childNodes;
   for(i = 0; i < cont.length; i++) {
       if(cont[i].className == 'a') {
           cont[i].className = 'b';
       }
   }
}
</script>

  1. <button onclick="col('cont1')">col</button>
1maciek
no ale co mi to da, ja chce zmienic kolor tekstu we wszystkich divach w calym dokumencie a nie tylko w cont1, czy cont2, a podawanie wszystkich wskaznikow mija sie z celem bo jak napisalem tych divowo-cont moze byc np 100, pozatym co jesli wewnatrz diva z cont1 oprocz divow wewnetrznych bedzie jeszcze tabela, to w funkcji js w cont mam nie tylko divy ale i tabele w ktorej nie chce zmienic koloru tekstu.
revyag
Trzeba było od razu napisać że chodzi Ci o elementy w całym dokumencie.
Kod
<script type="text/javascript">
function col() {
    var c = document.getElementsByTagName("div");
    for(var i = 0; i < c.length; i++) {
        if(c[i].className=='a') {
            c[i].className='b';
        }
    }
}
</script>

  1. <div>
  2. <div class="a">a</div>
  3. <div class="a">b</div>
  4. <div class="a">c</div>
  5. </div>
  6. </div>
  7. <p>
  8. <div class="a">a</div>
  9. <div class="a">b</div>
  10. <div class="a">c</div>
  11. </p>
  12. <div>
  13. <div class="a">a</div>
  14. <div class="a">b</div>
  15. <div class="a">c</div>
  16. </div>
  17. <button onclick="divs()">show</button>

Zrobiłem przykładowe zagnieżdzenia, żebyś zobaczył że jest ok.
1maciek
blisko ale to jeszcze nie to,
a jesli bede mial w dokumencie poza divami z klasy 'a' takze divy klasy 'q', w ktorych nie chce nic zmianiac chce zeby dalej byly w klasie 'q'? a te z klasy 'a' zmienic na klase 'b', oczywiscie divy sie przeplataja i wystepuja w roznych miajscach w calym dokumencie
revyag
Dobrze że myślisz z wyprzedzeniem, ale czy sprawdziłeś jak zachowa się skrypt w sytuacji którą opisujesz ?
W całym dokumencie zostaną zmienione klasy divów o klasie 'a'. Przecież widać to jak na dłoni w skrypcie.
1maciek
przyznaje nie sprawdzilem,
dzieki za pomoc
pozdrawiam
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.