ਕਲਾਸ ਹਟਾਉਣ ਕਿਵੇਂ?
- ਪਿਛਲਾ ਪੰਨਾ ਕਲਾਸ ਜੋੜਨਾ
- ਅਗਲਾ ਪੰਨਾ ਕਲਾਸ ਬਦਲਣਾ
ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੇ ਰਾਹੀਂ ਐਲੀਮੈਂਟ ਤੋਂ ਕਲਾਸ ਹਟਾਉਣ ਨੂੰ ਸਿੱਖੋ。
ਬਟਨ ਨੂੰ ਦਬਾਉਣ ਨਾਲ ਇੱਥੋਂ ਇੱਕ ਕਲਾਸ ਹਟਾਓ!
ਕਲਾਸ ਹਟਾਓ
ਪਹਿਲਾ ਕਦਮ - ਐਲਾਂਗਨ ਜੋੜਨਾ:
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਅਸੀਂ ਇੱਕ ਬਟਨ ਦੀ ਮਦਦ ਨਾਲ ਕਰਾਂਗੇ 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 属性
- ਪਿਛਲਾ ਪੰਨਾ ਕਲਾਸ ਜੋੜਨਾ
- ਅਗਲਾ ਪੰਨਾ ਕਲਾਸ ਬਦਲਣਾ