Element#
Element.className#
Właściwość className zwraca lub ustawia wartość w atrybucie class danego elementu i wpływa na jego klasy.
Opis działania#
Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:
var classes = element.className; // getting element.className = new_value; // setting
gdzie poszczególne człony oznaczają:
- classes - łańcuch znakowy reprezentujący aktualną wartość atrybutu
classw elemencie. - element - węzeł będący obiektem kontekstu.
- new_value - łańcuch znakowy reprezentujący nową wartość atrybutu
classw elemencie.
Odczytanie i zmiana wartości dla właściwości className polega na zasadzie odzwierciedlenia zawartości atrybutu z przekazaniem nazwy lokalnej "class" (szczegóły).
Specyfikacja HTML5 wprowadza pojęcie globalnego atrybutu class, ale nie definiuje dla niego żadnej nowej właściwości DOM, a jedynie informuje o odzwierciedleniu (reflect) zawartości tego atrybutu przez już istniejące właściwości className oraz Element.classList definiowane przez aktualną specyfikację DOM4.
Modyfikowanie (dodawanie/usuwanie/zastępowanie/przełączanie) poszczególnych klas w elemencie najwygodniej przeprowadzić przy użyciu dedykowanych metod w skojarzonym zestawie słów DOM, który otrzymamy poprzez odczyt właściwości Element.classList.
Nazwa "className" została użyta dla tej właściwości zamiast "class" z powodu konfliktów ze słowem kluczowym "class" w wielu innych językach programowania, które mogą być wykorzystywane do manipulowania drzewem DOM. Samo słowo "class" jest także zarezerwowane na potrzeby przyszłych wydań specyfikacji ECMAScript.
Prosty przykład:
<script>
var html = document.documentElement; // referencja do elementu HTML
document.write(html); // [object HTMLHtmlElement]
document.write("<br>");
document.write(html.className); // "" - pusty łańcuch znakowy
document.write("<br>");
html.className = "test1 test2 test3"; // zmiana wartości atrybutu
document.write(html.className); // test1 test2 test3
document.write("<br><br>");
document.write(Element.prototype.hasOwnProperty("className")); // true
document.write("<br>");
document.write(html.__proto__.__proto__.__proto__.hasOwnProperty("className")); // true
document.write("<br>");
document.write(html.__proto__.__proto__.__proto__); // [object ElementPrototype]
</script>Właściwość className dla węzła typu Element pojawia się dopiero w specyfikacji DOM4. W przeszłości była ona definiowana dla interfejsu HTMLElement w osobnej specyfikacji DOM Level 2 HTML.
Składnia Web IDL#
interface Element : Node { attribute DOMString className; }