jQuery CSS ਓਪਰੇਸ਼ਨ - css() ਮੇਥਡ

ਮਾਡਲ

<p> ਅਣੂਰਦਾ ਦੀ ਰੰਗ ਸੈੱਟ ਕਰੋ:

$(".btn1").click(function(){
  $("p").css("color","red");
});

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

ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ

css() ਮੇਥਡ ਮੇਲ ਵਾਲੇ ਅਣੂਰਦੇ ਦੇ ਇੱਕ ਜਾਂ ਕਈ ਸਟਾਈਲ ਪ੍ਰਤੀਯੋਗਿਤਾ ਨੂੰ ਲੈਣ ਜਾਂ ਸੈੱਟ ਕਰਨ ਵਾਲਾ ਹੈ。

CSS ਪ੍ਰਤੀਯੋਗਿਤਾ ਕੀਮਤ ਪ੍ਰਾਪਤ ਕਰੋ

ਪਹਿਲੇ ਮੇਲ ਵਾਲੇ ਅਣੂਰਦਾ ਦੇ CSS ਪ੍ਰਤੀਯੋਗਿਤਾ ਦੀ ਕੀਮਤ ਪ੍ਰਾਪਤ ਕਰੋ。

ਟਿੱਪਣੀ:ਇੱਕ ਕੀਮਤ ਲੈਣ ਵਾਲੇ ਮਾਮਲਿਆਂ ਵਿੱਚ ਸ਼ਾਰਟਨਾਮਾ ਵਾਲੇ CSS ਪ੍ਰਤੀਯੋਗਿਤਾ (ਜਿਵੇਂ ਕਿ "background" ਅਤੇ "border") ਨਹੀਂ ਸਮਰਥਿਤ ਹਨ。

$(selector).css(name)
ਪੈਰਾਮੀਟਰ ਵਰਣਨ
name ਲਾਜ਼ਮੀ। CSS ਪ੍ਰਤੀਯੋਗਿਤਾ ਦਾ ਨਾਮ ਨਿਰਧਾਰਿਤ ਕਰੋ। ਇਹ ਪੈਰਾਮੀਟਰ ਕਿਸੇ ਵੀ CSS ਪ੍ਰਤੀਯੋਗਿਤਾ ਨੂੰ ਸ਼ਾਮਲ ਕਰ ਸਕਦਾ ਹੈ। ਉਦਾਹਰਣ ਵਜੋਂ "color"。

ਮਾਡਲ

ਪਹਿਲੇ ਪੈਰਾਗ੍ਰਾਫ ਦੇ color ਸਟਾਈਲ ਪ੍ਰਤੀਯੋਗਿਤਾ ਦੀ ਕੀਮਤ ਪ੍ਰਾਪਤ ਕਰੋ:

$("p").css("color");

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

CSS ਪ੍ਰਤੀਯੋਗਿਤਾ ਸੈੱਟ ਕਰੋ

ਸਾਰੇ ਮੈਚ ਕਰਨ ਵਾਲੇ ਏਜੈਂਟਾਂ 'ਤੇ ਨਿਰਧਾਰਿਤ CSS ਪ੍ਰਤੀਯੋਗੀ ਸੈਟ ਕਰੋ।

$(selector).css(name,value)
ਪੈਰਾਮੀਟਰ ਵਰਣਨ
name ਲਾਜ਼ਮੀ। CSS ਪ੍ਰਤੀਯੋਗੀ ਦਾ ਨਾਮ ਨਿਰਧਾਰਿਤ ਕਰੋ। ਇਹ ਪੈਰਾਮੀਟਰ ਕੋਈ ਵੀ CSS ਪ੍ਰਤੀਯੋਗੀ ਹੋ ਸਕਦਾ ਹੈ ਜਿਵੇਂ ਕਿ "color"。
value

value - ਵਿਕਲਪਿਤ। CSS ਪ੍ਰਤੀਯੋਗੀ ਦਾ ਮੁੱਲ ਨਿਰਧਾਰਿਤ ਕਰੋ। ਇਹ ਪੈਰਾਮੀਟਰ ਕੋਈ ਵੀ CSS ਪ੍ਰਤੀਯੋਗੀ ਮੁੱਲ ਹੋ ਸਕਦਾ ਹੈ ਜਿਵੇਂ ਕਿ "red"。

ਜੇਕਰ ਖਾਲੀ ਸਟਰਿੰਗ ਮੁੱਲ ਸੈਟ ਕੀਤਾ ਗਿਆ ਤਾਂ ਏਜੈਂਟ ਵਿੱਚ ਨਿਰਧਾਰਿਤ ਪ੍ਰਤੀਯੋਗੀ ਨੂੰ ਹਟਾਓ。

ਮਾਡਲ

ਸਾਰੇ ਪੈਰਾਗ੍ਰਾਫਾਂ ਦੀ ਰੰਗ ਨੂੰ ਲਾਲ ਸੈਟ ਕਰੋ:

$("p").css("color","red");

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

ਫੰਕਸ਼ਨ ਦੇ ਮਾਧਿਅਮ ਨਾਲ CSS ਪ੍ਰਤੀਯੋਗੀ ਸੈਟ ਕਰੋ

ਸਾਰੇ ਮੈਚ ਕਰਨ ਵਾਲੇ ਏਜੈਂਟਾਂ 'ਤੇ ਸਟਾਇਲ ਪ੍ਰਤੀਯੋਗੀ ਦੇ ਮੁੱਲ ਨੂੰ ਸੈਟ ਕਰੋ。

ਇਹ ਫੰਕਸ਼ਨ ਸੈਟ ਕਰਨ ਵਾਲੇ ਪ੍ਰਤੀਯੋਗੀ ਦਾ ਮੁੱਲ ਵਾਪਸ ਦਿੰਦਾ ਹੈ। ਇਹ ਫੰਕਸ਼ਨ ਦੋ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ, index ਏਜੈਂਟ ਵਸਤੂ ਵਿੱਚ ਇੱਕ ਸਥਾਨ ਹੈ ਅਤੇ value ਪੁਰਾਣਾ ਪ੍ਰਤੀਯੋਗੀ ਮੁੱਲ ਹੈ。

$(selector).css(name,function(index,value))
ਪੈਰਾਮੀਟਰ ਵਰਣਨ
name ਲਾਜ਼ਮੀ। CSS ਪ੍ਰਤੀਯੋਗੀ ਦਾ ਨਾਮ ਨਿਰਧਾਰਿਤ ਕਰੋ। ਇਹ ਪੈਰਾਮੀਟਰ ਕੋਈ ਵੀ CSS ਪ੍ਰਤੀਯੋਗੀ ਹੋ ਸਕਦਾ ਹੈ ਜਿਵੇਂ ਕਿ "color"。
function(index,value)

ਫੰਕਸ਼ਨ ਨੂੰ ਰਿਟਰਨ ਕਰਨ ਵਾਲਾ CSS ਪ੍ਰਤੀਯੋਗੀ ਦਾ ਨਵਾਂ ਮੁੱਲ ਨਿਰਧਾਰਿਤ ਕਰੋ。

  • index - ਵਿਕਲਪਿਤ। ਸੈਲੈਕਟਰ ਦੀ ਇੰਡੈਕਸ ਸਥਿਤੀ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ
  • oldvalue - ਵਿਕਲਪਿਤ। CSS ਪ੍ਰਤੀਯੋਗੀ ਦੀ ਮੌਜੂਦਾ ਮੁੱਲ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ。

ਮਾਡਲ 1

ਸਾਰੇ ਪੈਰਾਗ੍ਰਾਫਾਂ ਦੀ ਰੰਗ ਨੂੰ ਲਾਲ ਸੈਟ ਕਰੋ:

$("button").click(function(){
    $("p").css("color",function(){return "red";});
    });

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

ਮਾਡਲ 2

div ਦੀ ਚੌੜਾਈ ਨੂੰ ਪ੍ਰਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਵਧਾਓ:

$("div").click(function() {
  $("this").css(
    "width", function(index, value) {return parseFloat(value) * 1.2;}
  );
});

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

ਸੈਟ ਕਰੋ ਕਈ ਸੀਐੱਸਐੱਸ ਪ੍ਰਤੀਯੋਗੀ ਮੁੱਲ/ਮੁੱਲ

$(selector).css({property:value, property:value, ...})

ਸਾਰੇ ਮੈਚ ਕਰਨ ਵਾਲੇ ਏਜੈਂਟਾਂ 'ਤੇ "ਨਾਮ/ਮੁੱਲ" ਵਸਤੂ ਨੂੰ ਸਟਾਇਲ ਪ੍ਰਤੀਯੋਗੀਆਂ ਵਿੱਚ ਸੈਟ ਕਰੋ。

ਇਹ ਸਾਰੇ ਮੈਚ ਕਰਨ ਵਾਲੇ ਏਜੈਂਟਾਂ 'ਤੇ ਬਹੁਤ ਸਾਰੇ ਸਟਾਇਲ ਪ੍ਰਤੀਯੋਗੀਆਂ ਨੂੰ ਸੈਟ ਕਰਨ ਦਾ ਸਭ ਤੋਂ ਵਧੀਆ ਤਰੀਕਾ ਹੈ。

ਪੈਰਾਮੀਟਰ ਵਰਣਨ
{property:value}

ਲਾਜ਼ਮੀ। ਸਟਾਇਲ ਪ੍ਰਤੀਯੋਗੀ "ਨਾਮ/ਮੁੱਲ" ਵਸਤੂ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਨ ਲਈ ਵਸਤੂ ਦਾ ਪਾਠ ਰੱਖਣਾ ਹੈ。

ਇਹ ਪੈਰਾਮੀਟਰ ਕਈ ਪ੍ਰਕਾਰ ਦੇ CSS ਪ੍ਰਤੀਯੋਗੀ ਨਾਮ/ਮੁੱਲ ਦੇ ਪਾਰੇ ਦਾ ਪਾਠ ਸਮੇਤ ਹੋ ਸਕਦਾ ਹੈ। ਉਦਾਹਰਣ ਵਜੋਂ {"color":"red","font-weight":"bold"}

ਮਾਡਲ

$("p").css({
  "color":"white",
  "background-color":"#98bf21",
  "font-family":"Arial",
  "font-size":"20px",
  "padding":"5px"
  });

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