Mam element, który ma już swoją klasę:
``html
Teraz chcę stworzyć funkcję JavaScript, która doda klasę do div
(nie zastąpi, ale doda).
Jak mogę to zrobić?
Dodaj spację plus nazwę swojej nowej klasy do właściwości className
elementu. Po pierwsze, umieść id
na elemencie, abyś mógł łatwo uzyskać referencję.
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>
Następnie
var d = document.getElementById("div1");
d.className += " otherclass";
Zwróć uwagę na spację przed otherclass
. Ważne jest, aby umieścić spację przed otherclass
, w przeciwnym razie będzie to miało negatywny wpływ na istniejące klasy, które znajdują się przed nią na liście klas.
Zobacz także element.className na MDN.
Znajdź swój element docelowy "d" jakkolwiek chcesz, a następnie:
d.className += ' additionalClass'; //note the space
możesz zawinąć to w sprytniejsze sposoby, aby sprawdzić preegzystencję i sprawdzić wymagania dotyczące przestrzeni itp.
Zakładając, że robisz coś więcej niż tylko dodanie tej jednej klasy (np. masz asynchroniczne żądania i tak dalej), poleciłbym bibliotekę taką jak Prototype lub jQuery.
To sprawi, że prawie wszystko, co będziesz musiał zrobić (w tym to) będzie bardzo proste.
Załóżmy więc, że masz już jQuery na swojej stronie, możesz użyć takiego kodu, aby dodać nazwę klasy do elementu (w tym przypadku przy ładowaniu):
$(document).ready( function() {
$('#div1').addClass( 'some_other_class' );
} );
Sprawdź przeglądarkę API jQuery dla innych rzeczy.