Czy element na stronie może mieć dwie (lub więcej) klas?

Question

Witajcie!

Mam na myśli taką sytuację, że nadaję klasę w HTML'u (czyli <div class="x">), a potem chcę nadać z poziomu JavaScript'u (czyli object.className="y";). To jak to będzie działać? Czy ta nowa klasa wyprze starą, czy będą dwie klasy? Co jeśli ich właściwości się będą wykluczały (np.: x ma color: #f8234b; zaś y ma color: #44a21c;)?

Answer 1

Zamieni klasę obiektu na wskazaną w JSie. Jak chcesz zamienić na podwójną klasę to wpisujesz tak object.className="x y";  (lub możesz sprawdzać aktualną klasę i dokładać do niej nową).

Zadziała ostatnia klasa jeśli właściwości się powtarzają - aby tego uniknąć, możesz dać w pierwszej klasie !important do koloru.

Comments

Tak jak napisał bwaluk - będzie jedna klasa. Jeżeli chcesz więcej możesz użyć:

element.classList i metod add() i remove(). Wtedy element będzie posiadał obie klasy i w przypadku tych samych właściwości zastosuje tą z ostatniej klasy na liście.

---

@bwaluk, Dziękuję!

Answer 2

Najprostszy sposób na wiele klas to dodanie jedna obok drugiej:

div class="pierwsza-klasa x2 trzecia-klasa">

Powyżej nadałem elementowi 3 klasy.

Jeżeli w pierwszej będzie ten sam kod co w trzeciej, nadpisany zostanie ten kod, który w cssie będzie wczytany później.

To znaczy, jeżeli w tym przypadku twój kod css wyglądałby tak:

.trzecia-klasa {
color: blue
}
.pierwsza-klasa {
color: red
}

Dla elementu zadziała kolor red, bo w pliku css został on wyegzekwowany jako ostatni dla tego elementu.

Pamiętaj, że klasy css powinny mieć conajmniej 2 literki i nie zaczynać ich od cyfry.

Klasa "x" jest niepoprawna.

Comments

Dziękuję!