HTML DOM Öğesi classList
❮ Öğe NesnesiÖrnek
Bir öğeye "myStyle" sınıfı ekleyin:
element.classList.add("myStyle");
Bir öğeden "myStyle" sınıfını kaldırın:
element.classList.remove("myStyle");
Bir öğe için iki sınıf arasında geçiş yapın:
element.classList.toggle("newStyle");
Aşağıda daha fazla örnek.
Tanım ve Kullanım
Özellik classList, bir öğenin CSS sınıf adlarını döndürür.
Özellik classList, bir DOMTokenList nesnesi döndürür.
Özellik classListsalt okunurdur, ancak CSS sınıfları eklemek veya kaldırmak için add() ve remove() yöntemlerini kullanabilirsiniz.
Not
Bu classListözellik, bir öğeye CSS sınıfları eklemek, kaldırmak ve değiştirmek için kullanışlıdır.
Ayrıca bakınız:
Sözdizimi
element.classList
Mülk değerleri
| Value | Description |
| length | The number of classes in the list. This property is read-only. |
yöntemler
| Method | Description |
| add(class1, class2, ...) |
Adds one or more classes. |
| contains(class) |
Returns true if an element has the class, otherwise false.
|
| item(index) | Returns the class name with a specified index. Index starts at 0. Returns null if the index is out of range. |
| remove(class1, class2, ...) | Removes one or more classes from an element. Removing a class that does not exist, does NOT throw an error. |
| toggle(class, true|false) | Toggles between a class for an element. It removes the class and returns false.If the class does not exist, it adds the class and returns true.The optional second parameter is a boolean that forces the class to be added or removed, regardless of whether or not it already exists. The second parameter is not supported in Internet Explorer 11 or earlier. |
Geri dönüş değeri
| Type | Description |
| Object | A DOMTokenList. A list of the class names of an element. |
Daha fazla örnek
Bir öğeye birden çok sınıf ekleyin:
element.classList.add("myStyle", "anotherClass", "thirdClass");
Bir öğeden birden çok sınıfı kaldırın:
element.classList.remove("myStyle", "anotherClass", "thirdClass");
Öğenin kaç sınıf adı vardır:
let numb = element.classList.length;
"myDIV" öğesinin sınıf adlarını alın:
<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;
Bir öğenin birinci sınıfını alın:
let className = element.classList.item(0);
Bir öğenin "myStyle" sınıfı var mı?
let x = element.classList.contains("myStyle");
Bir öğenin "myStyle" sınıfı varsa "anotherClass" öğesini kaldırın.
if (element.classList.contains("mystyle")) {
element.classList.remove("anotherClass");
}
Bir açılır düğme oluşturmak için sınıflar arasında geçiş yapın:
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
Yapışkan bir gezinme çubuğu oluşturun:
// Get the navbar
var navbar = document.getElementById("navbar");
//
Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove the sticky class when you leave the scroll position.
function myFunction() {
if (window.pageYOffset
>= sticky) {
navbar.classList.add("sticky")
}
else {
navbar.classList.remove("sticky");
}
}
Tarayıcı Desteği
element.classList tüm tarayıcılarda desteklenir:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 10-11 | Yes | Yes | Yes | Yes |
❮ Öğe Nesnesi