• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak odwołać się do divów, których nazwa ID jest dłuższa niź X znaków?

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
392 wizyt
pytanie zadane 22 marca 2016 w JavaScript przez Mr Popcorn Bywalec (2,340 p.)
Witam serdecznie.

Chciałbym zrobić switch'a na swojej stronce, który po przełączeniu, zmieni czcionkę WSZYSTKIM divom, których ID jest dłuższe niż np. 5 znaków.

Switch'a jako tako mam, funkcje testowe działają, tylko nie wiem, jak zrobić aby wyszukał mi tych divów i zmienił im font-family...

Pozdrawiam.

3 odpowiedzi

+2 głosów
odpowiedź 22 marca 2016 przez Comandeer Guru (606,120 p.)
wybrane 22 marca 2016 przez Mr Popcorn
 
Najlepsza

Osobiście pobrałbym wszystkie elementy div[id] i dopiero wówczas sprawdzał w pętli ich [id].

var divs = document.querySelectorAll( 'div[id]' );

for ( var i = 0; i < divs.length; ++i ) {
    if ( divs[ i ].id.length > 5 ) {
      divs[ i ].classList.add( 'marked' );
    }
}

 

komentarz 22 marca 2016 przez Mr Popcorn Bywalec (2,340 p.)

Twój kod mi pomógł. Ślicznie dziękuje.
Zamieniłem tylko

divs[ i ].classList.add( 'marked' );

na

divs[ i ].style.fontSize = "larger" ; 
divs[ i ].style.fontFamily = "Lato";

i działa. :-D

Jezsze raz bardzo dziękuje.

+3 głosów
odpowiedź 22 marca 2016 przez uRTLy Bywalec (2,420 p.)
edycja 22 marca 2016 przez uRTLy
var div = document.getElementsByTagName("div"),
id = [];


for(var i = 0 ; i < div.length ; i ++){


id[i] = div.item(i).id.toString(); 

if(id[i].length > 5 ){
TU ZMIENIASZ FONTA.
   }
}

Dajesz to w funkcje i addEvent listener na przycisk .Tylko nie wiem po co ci taki idiotyzm jak wystarczy im wszystkim dać klasy ... 

komentarz 22 marca 2016 przez Comandeer Guru (606,120 p.)

Hm… Ale elem.id zawsze jest stringiem. Wywoływanie toString jest niepotrzebne.

komentarz 22 marca 2016 przez Mr Popcorn Bywalec (2,340 p.)

ślicznie dziękuje, ale coś mi nie działa. gdzie robię błąd?

 

  var div = document.getElementsByTagName("div"),
  id = [i];
  
  for(var i = 0 ; i < div.length ; i ++){
  id[i] = div.item(i).id.toString(); 
 
  if(id[i].length > 10 ){
    id[i].style.color = "Red";
    id[i].style.background = "Green";
    id[i].style.fontSize = "larger" ; 
    id[i].style.fontFamily = "Arial";
    
  }
}

 

komentarz 22 marca 2016 przez Comandeer Guru (606,120 p.)

Bo próbujesz przypisać style do atrybutu [id], a nie elementu.

–2 głosów
odpowiedź 22 marca 2016 przez DL TD Nałogowiec (36,710 p.)

Robisz to w następujący sposób. Dla przykładu zamiast switch'a użyję zwykłego onclick, który wyświetli alert w przeglądarce ;) Na początku zajmijmy się tą linijką:

<div id="lubiebociany" onclick="alert(this.id)">KLIKNIJ!</div>

Mamy więc diva o id lubiebociany i onclicka, który pobiera string z atrybutu id. Po naciśnięciu na napis KLIKNIJ! zobaczysz alert ze stringiem pobranym z atrybutu id. Zakładam, że znasz JS więc pomijam drobiazgi, takie jak zapisanie łańcucha znaków w zmiennej zamiast wyświetlania komunikatu itp. Teraz jak sprawdzić długość stringa? Jest to bardzo proste. Użyj length np.:

<script>
var id = 'lubiebociany';
document.getElementById("display-length").innerHTML =  id.length;
</script>

<div id="display-length"></div>

 

Podobne pytania

0 głosów
1 odpowiedź 349 wizyt
0 głosów
1 odpowiedź 1,225 wizyt
pytanie zadane 23 września 2017 w JavaScript przez Vorex444 Dyskutant (9,610 p.)
0 głosów
1 odpowiedź 211 wizyt

93,103 zapytań

142,077 odpowiedzi

321,567 komentarzy

62,445 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...