Zmiena stylu divów js (class)

0

Witam,
czy da się zmienić style kilku divów o jednej klasie? W sensie, że mam

I chcę zmienić ich tło wsposów [...].style.background="gray";

Szukałem na internecie, ale tam pisali, że się nie da, albo, żeby jakoś indeksować, ale chcę poznać Wasze zdanie, bo może da się to łatwiej zrobić.

4

Łatwiejszym zdaniem jest pobranie elementu po id - wtedy korzystasz z document.getElementById, ponieważ elementów z danym ID może być tylko 1.

W przypadku operowania klasami, sprawa się trochę (ale nie jakoś bardzo mocno) komplikuje - musisz pobrać wszystkie elementy z daną klasa, a potem przez nie "przelecieć" i dla każdego z osobna wykonać daną akcję (czyli w Twoim przykładzie - zmienić ich kolor tła).

Przykładowy kod:

var elementy = document.getElementsByClassName("jakasklasa");
var i;
for (i = 0; i < elementy.length; i++) {
  elementy[i].style.backgroundColor = "gray";
} 
0

Bardzo dziękuje za pomoc. Niestety nie mogę użyć id, ponieważ w PHP robię pętlą divy i nie chcę, aby miały inne id.

2

Bardzo dziękuję za podziękowanie.
Bardzo proszę o ponowne przeczytanie ze zrozumieniem mojej odpowiedzi :P

0

Jeszcze tak zapytam, jak mogę pobrać wszystkie inputy, w których typ to text zmienić color?

0

Zapytaj proszę jeszcze raz, ale lepiej opisz problem, bo za bardzo nie rozumiem, o co Ci chodzi :(

0
cerrato napisał(a):

Zapytaj proszę jeszcze raz, ale lepiej opisz problem, bo za bardzo nie rozumiem, o co Ci chodzi :(

Czy mogę "złapać" wszystkie inputy, gdzie typ to text (tak jak document.getElementById(...), ale input text) i użyć [...].style.color = "white"

0

Możesz :)

1

Najprostsza metoda - skoro Ty i tak tworzysz ten HTML w PHP, wystarczy, że do tych inputów, które chcesz wyłapać, dodasz dodatkowa klasę. Pamiętaj, że o ile ID może być tylko jedno, to klas można dawać dowolną ilość, Ponadto, klasa nie musi być nigdzie więcej wykorzystana, nie musisz jej w CSS dodawać, więc wystarczy, że stworzysz jakąś wartość dla class - chociażby coś w stylu class="xxx xxx xxx poletekstowe" (w tym przykładzie pod xxx kryją się inne klasy, które już i tak masz przypisane do tych elementów), a następnie skorzystasz z podanego przez mnie kilka postów wyżej przykładu, a tam zamiast "jakasklasa" wpiszesz sobie "poletekstowe". W ten sposób będziesz mógł przelecieć przez wszystkie elementy, które Cię interesują.

Opcja druga (moim zdaniem słabsza) - skorzystać z https://developer.mozilla.org/pl/docs/Web/API/Document/getElementsByTagName. Sposób postępowania analogiczny do podanego powyżej getElementsByClassName. Minusem takiego rozwiązania jest to, że tutaj dostaniesz wszystkie elementy określonego typu, a w poprzednim akapicie możesz wprowadzić rozróżnienie i np. część edit'ów pokolorować, a część zostawić bez zmian.

1
Gouda105 napisał(a):
cerrato napisał(a):

Zapytaj proszę jeszcze raz, ale lepiej opisz problem, bo za bardzo nie rozumiem, o co Ci chodzi :(

Czy mogę "złapać" wszystkie inputy, gdzie typ to text (tak jak document.getElementById(...), ale input text) i użyć [...].style.color = "white"

Możesz, ale tylko w pętli po kolei.

Z drugiej strony możesz zrobić / zmodyfikować całą klasę CSS i wtedy zmiana będzie się tyczyć wszystkich elementów mających tę klasę na swojej classlist. Patrz np:
https://stackoverflow.com/questions/1720320/how-to-dynamically-create-css-class-in-javascript-and-apply

2

Czy mogę "złapać" wszystkie inputy, gdzie typ to text (tak jak document.getElementById(...), ale input text) i użyć [...].style.color = "white"

Tak, np:

const items = document.querySelectorAll('input[type=text]')

Przeiterować możesz po nich na kilka sposobów, dwa najwygodniejsze:

// Sposób 1:
for (let item of items) {
  item.style.color = 'white'
}

// Sposób 2:
[...items].forEach(item => {
  item.style.color = 'white'
})

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