HTML DOM Element className ਪ੍ਰਤੀਭਾਵ

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

className ਪ੍ਰਤੀਭਾਵ ਸੈਟ ਕਰੋ ਜਾਂ ਪ੍ਰਤੀਭਾਵ ਵਾਪਸ ਕਰੋ ਪ੍ਰਤੀਭਾਵ ਪ੍ਰਤੀਭਾਵ

ਹੋਰ ਦੇਖੋ:

Element classList ਪ੍ਰਤੀਭਾਵ

Document getElementsByClassName() ਮੰਥਨ

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

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

ਐਲੀਮੈਂਟ ਦੇ class ਪ੍ਰਤੀਭਾਵ ਸੈਟ ਕਰੋ:

element.className = "myStyle";

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 2

myDIV ਦੇ class ਪ੍ਰਤੀਭਾਵ ਪ੍ਰਾਪਤ ਕਰੋ:

let value = document.getElementById("myDIV").className;

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 3

ਦੋ ਵਰਗਾਂ ਦਰਮਿਆਨ ਤਬਦੀਲ ਕਰੋ:

if (element.className == "myStyle") {
  element.className = "newStyle";
} else {
  element.className = "myStyle";
}

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਸੁਝਾਅ:ਪੰਨੇ ਦੇ ਨਿਚੋਂ ਹੋਰ ਉਦਾਹਰਣਾਂ ਮਿਲਣਗੇ。

ਵਿਧਾਨ

className ਪ੍ਰਤੀਭਾਵ ਵਾਪਸ ਕਰੋ:

HTMLElementObject.className

className ਪ੍ਰਤੀਭਾਵ ਸੈਟ ਕਰੋ:

HTMLElementObject.className = class

ਪ੍ਰਤੀਭਾਵ

ਮੁੱਲ ਵਰਣਨ
class

ਈਲੀਮੈਂਟ ਦੀ ਕਲਾਸ ਨਾਮ

ਬਹੁਤ ਸਾਰੀਆਂ ਕਲਾਸਾਂ ਨੂੰ ਖਾਲੀ ਜਗ੍ਹਾ ਨਾਲ ਜੋੜੋ, ਜਿਵੇਂ ਕਿ "test demo"

ਰਿਟਰਨ ਵੈਲਿਊ

ਇਨਪੁਟ ਵਰਣਨ
ਸਟਰਿੰਗ ਈਲੀਮੈਂਟ ਦੀ ਕਲਾਸ, ਜਾਂ ਖਾਲੀ ਜਗ੍ਹਾ ਵਾਲੀ ਕਲਾਸ ਲਿਸਟ

ਹੋਰ ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 4

ਪਹਿਲੇ <div> ਈਲੀਮੈਂਟ ਦੀ class ਪ੍ਰਾਪਰਟੀ ਪ੍ਰਾਪਤ ਕਰੋ (ਜੇਕਰ ਹੈ):

let value = document.getElementsByTagName("div")[0].className;

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 5

ਬਹੁਤ ਸਾਰੀਆਂ ਕਲਾਸਾਂ ਵਾਲੇ class ਪ੍ਰਾਪਰਟੀ ਪ੍ਰਾਪਤ ਕਰੋ:

<div id="myDIV" class="myStyle test example">
<p>I am myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 6

ਨਵੇਂ class ਪ੍ਰਾਪਰਟੀ ਨਾਲ ਮੌਜੂਦਾ class ਪ੍ਰਾਪਰਟੀ ਨੂੰ ਸਰਕਰ ਕਰੋ:

element.className = "newClassName";

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 7

ਨਵੀਂ ਕਲਾਸ ਜੋੜਨ ਲਈ ਮੌਜੂਦਾ ਮੁੱਲ ਨੂੰ ਨਾ ਸਰਕਰ ਕਰਨ ਤਾਂ ਖਾਲੀ ਜਗ੍ਹਾ ਅਤੇ ਨਵੀਂ ਕਲਾਸ ਜੋੜੋ:

element.className += " class1 class2";

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 8

ਅਗਰ "myDIV" ਵਿੱਚ "myStyle" ਕਲਾਸ ਹੈ, ਤਾਂ ਫਾਂਟ ਸਾਈਜ਼ ਬਦਲੇਗਾ:

const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
  elem.style.fontSize = "30px";
}

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 9

ਅਗਰ ਤੁਸੀਂ ਪੇਜਿਲ ਉੱਪਰੰਤ 50 ਪਿਕਸਲ ਸਰੋਤਰ ਕਰਦੇ ਹੋ, ਤਾਂ "test" ਕਲਾਸ ਜੋੜੇਗਾ:

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  } else {
    document.getElementById("myP").className = "";
  }
}

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

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

ਸਾਰੇ ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ ਕਰਦੇ ਹਨ element.className：

ਚਰਮੋਇਲ ਆਈਈ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
ਚਰਮੋਇਲ ਆਈਈ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ

相关页面

CSS تعلیم:CSS زبان

CSS مرجع دستاویز:CSS .class انتخابگر