.ClassList () API - CSS-gudrybės

Turinys

Darant prielaidą, kad turite DOM elementą:

Gaukite nuorodą į tą DOM elementą:

const el = document.querySelector("#el");

Tada classListmetodu galite manipuliuoti to elemento klasėmis .

// Add a class el.classList.add("open"); // Add many classes el.classList.add("this", "little", "piggy"); let classes = ("is-message", "is-warning"); el.classList.add(… classes); // Remove a class el.classList.remove("open"); // Remove multiple classes el.classList.remove("this", "little", "piggy"); // Loop over each class el.classList; // DOMTokenList (pretty much an array) el.classList.forEach(className => ( // don't use "class" as that's a reserved word console.log(className); )); for (let className of $0.classList) ( console.log(className); ) el.classList.length; // integer of how many classes there are // Replace a class (replaces first with second) el.classList.replace("is-big", "is-small"); // Toggle a class (if it's there, remove it, if it's not there, add it) el.classList.toggle("open"); // Remove the class el.classList.toggle("open", false); // Add the class el.classList.toggle("open", true); // Add the class with logic el.classList.toggle("raining", weather === "raining"); // Check if element has class (returns true or false) el.classList.contains("open"); // Look at individual classes el.classList.item(0); // hot el.classList.item(1); // dog el.classList.item(2); // null el.classList(1); // dog

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.