HTML DOM Element classList 属性

定义和用法

classList 属性返回元素的 CSS 类名。

classList 属性返回 DOMTokenList。

实例

例子 1

将 "myStyle" 类添加到元素：

const list = element.classList;
list.add("myStyle");

మీరే ప్రయత్నించండి

例子 2

从元素中删除 "myStyle" 类：

const list = element.classList;
list.remove("myStyle");

మీరే ప్రయత్నించండి

例子 3

切换 "myStyle" 的开闭：

const list = element.classList;
list.toggle("myStyle");

మీరే ప్రయత్నించండి

提示：页面下方提供更多实例。

语法

element.classList

返回值

类型 描述
对象 DOMTokenList。元素的类名列表。

注释：classList 属性是只读的，但您可以使用下面列出的方法从列表中添加、切换或删除 CSS 类：

classList 属性和方法

名称 描述
add() 将一个或多个令牌添加到列表中。
contains() 如果列表包含类，则返回 true。
entries() 从列表中返回带有键/值对的迭代器。
forEach() జాబితాలో ప్రతి టోకెన్ కు కాల్బ్యాక్ ఫంక్షన్ అమలు చేయండి.
item() నిర్దేశించిన ఇండెక్స్‌లో టోకెన్ పునఃప్రారంభించండి.
keys() జాబితాలో కీలను కలిగివున్న ఇటీరేటర్ పునఃప్రారంభించండి.
length జాబితాలో టోకెన్ల సంఖ్యను పునఃప్రారంభించండి.
remove() జాబితాలో ఒకటి లేదా అనేక టోకెన్లను తొలగించండి.
replace() జాబితాలో టోకెన్లను పునఃప్రారంభించండి.
supports() టోకెన్ సహాయక టోకెన్లలో ఒకటి అయితే, true పునఃప్రారంభించండి.
toggle() జాబితాలో టోకెన్ల మధ్య మార్చండి.
value టోకెన్ జాబితాను స్ట్రింగ్ రూపంలో పునఃప్రారంభించండి.
values() జాబితాలో విలువలను కలిగివున్న ఇటీరేటర్ పునఃప్రారంభించండి.

మరిన్ని ఉదాహరణలు

ఉదాహరణ 4

ఎలమెంట్ కు అనేక క్లాస్‌లను జోడించండి:

element.classList.add("myStyle", "anotherClass", "thirdClass");

మీరే ప్రయత్నించండి

ఉదాహరణ 5

ఎలమెంట్ నుండి అనేక క్లాస్‌లను తొలగించండి:

element.classList.remove("myStyle", "anotherClass", "thirdClass");

మీరే ప్రయత్నించండి

ఉదాహరణ 6

ఎలమెంట్ యొక్క క్లాస్ సంఖ్య ఎంత ఉంది?

let numb = element.classList.length;

మీరే ప్రయత్నించండి

ఉదాహరణ 7

ఎలమెంట్ "myDIV" యొక్క క్లాస్ పొందండి:

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

మీరే ప్రయత్నించండి

ఉదాహరణ 8

ఎలమెంట్ యొక్క మొదటి క్లాస్ పొందండి:

let className = element.classList.item(0);

మీరే ప్రయత్నించండి

ఉదాహరణ 9

ఎలమెంట్ "myStyle" క్లాస్ ఉందా లేదు?

let x = element.classList.contains("myStyle");

మీరే ప్రయత్నించండి

ఉదాహరణ 10

ఇఫ్ ఎలమెంట్ "myStyle" క్లాస్ కలిగి ఉంది అయితే, "anotherClass" తొలగించండి:

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

మీరే ప్రయత్నించండి

ఉదాహరణ 11

క్లాస్‌ల మధ్య మార్చి డౌన్ బటన్ సృష్టించండి:

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

మీరే ప్రయత్నించండి

ఉదాహరణ 12

స్థిరమైన నేవిగేషన్ పేజీ సృష్టించండి:

// ప్రవాహాన్ని పొందండి
const navbar = document.getElementById("navbar");
// ప్రవాహానికి ప్రాంతాన్ని పొందండి
const sticky = navbar.offsetTop;
// మీరు దాని స్థానానికి చేరుకున్నప్పుడు, sticky క్లాస్ నవీకరించండి
// రాళ్ళు స్థానాన్ని పాటించినప్పుడు దానిని తొలగించండి
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

మీరే ప్రయత్నించండి

బ్రౌజర్ మద్దతు

అన్ని బ్రౌజర్లు మద్దతు ఇస్తాయి element.classList:

చ్రోమ్ ఐఇ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
చ్రోమ్ ఐఇ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
మద్దతు 9-11 మద్దతు మద్దతు మద్దతు మద్దతు

సంబంధిత పేజీలు

CSS పాఠ్యక్రమం:CSS శబ్దం

CSS సంక్షిప్త పత్రం:CSS .class ఎంపికకర్త

DOMTokenList వస్తువు

className అంశం

getElementsByClassName() మాథ్యం

HTML DOM Style 对象