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")
  }
    navbar.classList.remove("sticky");
  }
}

ਸਵੈ ਦੋਸ਼ਟੀ ਕਰੋ

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਬਰਾਉਜ਼ਰਾਂ ਦਾ ਸਮਰਥਨ ਹੈ element.classList:

ਚਰਮੋਨੇ ਆਈਈ ਐਜ਼ਡਜ ਫਾਰਫੈਕਸ ਸੈਫਾਰੀ ਓਪਰਾ
ਚਰਮੋਨੇ ਆਈਈ ਐਜ਼ਡਜ ਫਾਰਫੈਕਸ ਸੈਫਾਰੀ ਓਪਰਾ
ਸਮਰਥਨ 9-11 ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ

ਸਬੰਧਤ ਪੰਨੇ

CSS ਸਿੱਖਿਆ:CSS ਗਰੰਥ

CSS ਸਹਾਇਕ ਗ੍ਰੰਥ:CSS .class ਚੋਣਕਾਰ

DOMTokenList ਆਬਾਦੀ

className ਪ੍ਰਤੀਯੋਗਿਤਾ

getElementsByClassName() ਮੈਥਡ

ایچ تی ایم ال ڈوم اسٹائل آوبجیکٹ