jQuery CSS संचालन - css() विधि

उदाहरण

<p> एलिमेंट का रंग सेट करें:

$(".btn1").click(function(){
  $("p").css("रंग","लाल");
});

स्वयं का प्रयोग करें

परिभाषा और उपयोग

css() विधि एक या अनेक स्टाइल गुण को अनुकूलित एलिमेंट को लौटाए या सेट करती है।

CSS गुण मूल्य लौटाएं

पहले मेल खाते हुए एलिमेंट के CSS गुण की मूल्य लौटाएं।

टिप्पणी:जब एक मूल्य लौटाने के लिए इस्तेमाल किए जाते हैं तो लघुरूप से CSS गुण (जैसे "पृष्ठभूमि" और "किनारा") तुलना में समर्थ नहीं हैं।

$(selector).css(name)
पारामीटर वर्णन
name अनिवार्य। CSS गुण के नाम निर्धारित करें। यह पारामीटर किसी भी CSS गुण को शामिल कर सकता है। जैसे "रंग"।

उदाहरण

पहले अनुच्छेद के रंग शैली गुण की गुणवत्ता प्राप्त करें:

$("p").css("रंग");

स्वयं का प्रयोग करें

CSS गुण सेट करें

सभी मेल खाने वाले एलिमेंटों के निर्धारित CSS गुणात्मक सेट करता है.

$(selector).css(name,value)
पारामीटर वर्णन
name अनिवार्य. CSS गुणात्मक का नाम निर्धारित करता है. यह पारामीटर को कोई भी CSS गुणात्मक, जैसे "color" को समाविष्ट कर सकता है.
value

वृत्तव्यय. CSS गुणात्मक का मूल्य निर्धारित करता है. यह पारामीटर को कोई भी CSS गुणात्मक मूल्य, जैसे "red" को समाविष्ट कर सकता है.

अगर रिक्त शब्दांतर सेट किया गया है, तो एलिमेंट से निर्धारित गुणात्मक को हटा दिया जाएगा.

उदाहरण

सभी पैराग्राफों का रंग लाल सेट करें:

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

स्वयं का प्रयोग करें

फ़ंक्शन के द्वारा CSS गुणात्मक सेट करना

सभी मेल खाने वाले एलिमेंटों में शैली गुणात्मक मूल्य को सेट करता है.

यह फ़ंक्शन तय करने वाले गुणात्मक मूल्य को वापस देता है. दो पारामीटर, index एलिमेंट के ऑब्जेक्ट सेट में की स्थिति है, value पहले के गुणात्मक मूल्य है.

$(selector).css(name,function(index,value))
पारामीटर वर्णन
name अनिवार्य. CSS गुणात्मक का नाम निर्धारित करता है. यह पारामीटर को कोई भी CSS गुणात्मक, जैसे "color" को समाविष्ट कर सकता है.
function(index,value)

नया मूल्य को वापस देने वाले फ़ंक्शन को निर्धारित करता है.

  • index - वृत्तव्यय. चयनकर्ता के 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;}
  );
});

स्वयं का प्रयोग करें

सेट करने वाले कई CSS गुणात्मक नाम/मूल्य युग्म

$(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"
  });

स्वयं का प्रयोग करें