jQuery ਸਟਾਈਲ ਕਲਾਸ ਪ੍ਰਾਪਤ ਕਰਨ ਅਤੇ ਸੈਟ ਕਰਨ

ਜੇਕਰ ਤੁਸੀਂ CSS ਅਣੂ ਨੂੰ ਕਾਰਜ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ jQuery ਦੀ ਮਦਦ ਨਾਲ ਇਹ ਬਹੁਤ ਅਸਾਨ ਹੈ.

jQuery ਸਟਾਈਲ ਕਾਰਜ

jQuery ਸਟਾਈਲ ਕਾਰਜ ਲਈ ਕਈ ਮੈਥਡ ਰੱਖਦਾ ਹੈ. ਅਸੀਂ ਹੇਠ ਦੇ ਮੈਥਡਾਂ ਨੂੰ ਸਿੱਖਾਂਗੇ:

  • addClass() - ਚੁਣੇ ਹੋਏ ਅਣੂ ਨੂੰ ਇੱਕ ਜਾਂ ਕਈ ਕਲਾਸਾਂ ਜੋੜਨ
  • removeClass() - ਚੁਣੇ ਹੋਏ ਅਣੂ ਤੋਂ ਇੱਕ ਜਾਂ ਕਈ ਕਲਾਸਾਂ ਹਟਾਉਣ
  • toggleClass() - ਚੁਣੇ ਹੋਏ ਅਣੂ ਨੂੰ ਕਲਾਸ ਜੋੜਨ ਜਾਂ ਹਟਾਉਣ ਦਾ ਚੇਂਜ ਕਰਨ
  • css() - ਸਟਾਈਲ ਪ੍ਰਾਪਤ ਕਰਨ ਜਾਂ ਸੈਟ ਕਰਨ

ਮਾਡਲ ਸਟਾਈਲ ਸ਼ੇਅਰ

ਹੇਠ ਦਾ ਸਟਾਈਲ ਸ਼ੇਅਰ ਇਸ ਪੰਨੇ ਦੇ ਸਾਰੇ ਉਦਾਹਰਣਾਂ ਦੇ ਲਈ ਵਰਤਿਆ ਜਾਵੇਗਾ:

.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}

jQuery addClass() ਮੈਥਡ

ਹੇਠ ਦਾ ਉਦਾਹਰਣ ਵੱਖ-ਵੱਖ ਅਣੂ ਨੂੰ ਕਲਾਸ ਜੋੜਨ ਦੀ ਪ੍ਰਕਿਰਿਆ ਦਿਖਾਉਂਦਾ ਹੈ. ਕਲਾਸ ਜੋੜਨ ਦੇ ਸਮੇਂ, ਤੁਸੀਂ ਕਈ ਅਣੂਆਂ ਨੂੰ ਚੁਣ ਸਕਦੇ ਹੋ

ਮਾਡਲ

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

ਆਪਣੇ ਅਕਸ਼ਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਤੁਸੀਂ ਵੀ addClass() ਮੈਥਡ ਵਿੱਚ ਕਈ ਕਲਾਸਾਂ ਨੂੰ ਨਿਰਦੇਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ

ਮਾਡਲ

$("button").click(function(){
  $("#div1").addClass("important blue");
});

ਆਪਣੇ ਅਕਸ਼ਰ ਪ੍ਰਯੋਗ ਕਰੋ

jQuery removeClass() ਮੈਥਡ

ਹੇਠ ਦਾ ਉਦਾਹਰਣ ਵੱਖ-ਵੱਖ ਅਣੂ ਵਿੱਚ ਕਿਸੇ ਕਲਾਸ ਦੇ ਹਟਾਉਣ ਦੀ ਪ੍ਰਕਿਰਿਆ ਦਿਖਾਉਂਦਾ ਹੈ:

ਮਾਡਲ

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

ਆਪਣੇ ਅਕਸ਼ਰ ਪ੍ਰਯੋਗ ਕਰੋ

jQuery toggleClass() ਮੈਥਡ

ਹੇਠ ਦਾ ਉਦਾਹਰਣ jQuery toggleClass() ਮੈਥਡ ਦੀ ਵਰਤੋਂ ਦਿਖਾਉਂਦਾ ਹੈ: ਇਹ ਮੈਥਡ ਚੁਣੇ ਹੋਏ ਅਣੂ ਨੂੰ ਕਲਾਸ ਜੋੜਨ ਜਾਂ ਹਟਾਉਣ ਦਾ ਚੇਂਜ ਕਰਦਾ ਹੈ:

ਮਾਡਲ

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

ਆਪਣੇ ਅਕਸ਼ਰ ਪ੍ਰਯੋਗ ਕਰੋ

jQuery css() ਮੈਥਡ

ਅਗਲੇ ਚਾਪ ਵਿੱਚ ਅਸੀਂ jQuery css() ਮੈਥਡ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਦੱਸਾਂਗੇ

jQuery HTML ਸੂਚੀਬੱਧ

ਜੇਕਰ ਤੁਸੀਂ jQuery CSS ਮੈਥਡ ਦੇ ਪੂਰੇ ਸਮੱਗਰੀ ਦੀ ਜਾਣਕਾਰੀ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਸਾਡੇ ਦਾਖਲੇ ਦੀ ਯਾਤਰਾ ਕਰੋ jQuery CSS ਕਾਰਜ ਸੂਚੀਬੱਧ