ਕਲਾਸ ਹਟਾਉਣ ਕਿਵੇਂ?

ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੇ ਰਾਹੀਂ ਐਲੀਮੈਂਟ ਤੋਂ ਕਲਾਸ ਹਟਾਉਣ ਨੂੰ ਸਿੱਖੋ。

ਬਟਨ ਨੂੰ ਦਬਾਉਣ ਨਾਲ ਇੱਥੋਂ ਇੱਕ ਕਲਾਸ ਹਟਾਓ!

ਕਲਾਸ ਹਟਾਓ

ਪਹਿਲਾ ਕਦਮ - ਐਲਾਂਗਨ ਜੋੜਨਾ:

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਅਸੀਂ ਇੱਕ ਬਟਨ ਦੀ ਮਦਦ ਨਾਲ ਕਰਾਂਗੇ id="myDIV" ਦੇ <div> ਐਲੀਮੈਂਟ ਤੋਂ ਹਟਾਓ "mystyle" ਕਲਾਸ:

<button onclick="myFunction()">ਪ੍ਰਯੋਗ ਕਰੋ</button>
<div id="myDIV" class="mystyle">
  This is a DIV element.
</div>

ਦੂਜਾ ਕਦਮ - ਸਕ੍ਰੀਨ ਸਟਾਈਲ ਜੋੜਨਾ:

ਸ਼ੁਦਾ ਕਲਾਸ ਦੇ ਸਟਾਈਲ ਨੂੰ ਸੈਟ ਕਰੋ:

.mystyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
}

ਤੀਜਾ ਕਦਮ - ਜਾਵਾਸਕ੍ਰਿਪਟ ਜੋੜਨਾ:

ਪ੍ਰਾਪਤ ਕਰੋ id="myDIV" ਦੇ <div> ਐਲੀਮੈਂਟ ਨੂੰ ਅਤੇ ਉਸ ਤੋਂ ਹਟਾਓ "mystyle" ਕਲਾਸ:

function myFunction() {
  var element = document.getElementById("myDIV");
  element.classList.remove("mystyle");
}

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

ਸਬੰਧਤ ਪੰਨੇ

ਸਿੱਖਣ ਗਾਈਡ:如何切换类

ਸਿੱਖਣ ਗਾਈਡ:如何添加类

ਸੰਦਰਭ ਹੰਡਬੁੱਕਸ:HTML DOM Element classList 属性

ਸੰਦਰਭ ਹੰਡਬੁੱਕਸ:HTML DOM Element className 属性