ਕਲਾਸ ਜੋੜਨ ਕਿਵੇਂ?

ਕਲਾਸ ਜੋੜੋ

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

ਕਲਾਸ ਜੋੜੋ id="myDIV" ਦੇ div ਐਲੀਮੈਂਟ (ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਅਸੀਂ ਬਟਨ ਨੂੰ ਵਰਤੇ ਹਨ ਕਲਾਸ ਜੋੜਨ ਲਈ).

<button onclick="myFunction()">ਪ੍ਰਯੋਗ ਕਰੋ</button>
<div id="myDIV">
  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.add("mystyle");
}

ਆਪਣੇ ਹੀ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਸਬੰਧਤ ਪੰਨੇ

ਸਿੱਖਿਆ ਪੁਸਤਕਕਾਮ：如何切换类

ਸਿੱਖਿਆ ਪੁਸਤਕਕਾਮ：如何删除类

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

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