JQuery का उपयोग करके CSS कैसे बदलें?

Question

मैं jQuery का उपयोग करके सीएसएस को बदलने की कोशिश कर रहा हूं:

$(init);
    
function init() {
    $("h1").css("backgroundColor", "yellow");
    $("#myParagraph").css({"backgroundColor":"black","color":"white");
    $(".bordered").css("border", "1px solid black");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bordered">
    <h1>Header</h1>
    <p id="myParagraph">This is some paragraph text</p>
</div>

मुझे यहां क्या समझ नहीं आ रहा है?

Comments

यह तय हो गया है। जैसा कि नीचे उत्तर दिया गया है, दो समाधान हैं: (1) घुंघराले ब्रेस को हटा दें और बैकग्राउंड को चेंज करें-बैकग्राउंड-कलर (सीएसएस क्लास) या - कोर प्रॉब्लम) लापता कर्ली ब्रैस को अंत में रखें और DOM / JS नोटिफ़ाइड चुड़ैल का भी उपयोग करें काम करता है। सबको धन्यवाद!

— user449914

जावास्क्रिप्ट में सीएसएस में हेरफेर करना खराब अभ्यास माना जा सकता है। जोड़ने / हटाने / toggling वर्गों पर विचार करें।

— ऑस्टिन

Answer 1

उन लोगों को अनदेखा करें जो सुझाव दे रहे हैं कि संपत्ति का नाम मुद्दा है। JQuery एपीआई प्रलेखन स्पष्ट रूप से बताता है कि या तो नोटेशन स्वीकार्य है: http://api.jquery.com/css/

वास्तविक समस्या यह है कि आप इस लाइन पर एक बंद कर्ली ब्रेस याद कर रहे हैं:

$("#myParagraph").css({"backgroundColor":"black","color":"white");

इसे इसमें बदलें:

$("#myParagraph").css({"backgroundColor": "black", "color": "white"});

यहाँ एक कार्यशील डेमो है: http://jsfiddle.net/YPYz8/

$(init);
    
function init() {
    $("h1").css("backgroundColor", "yellow");
    $("#myParagraph").css({ "backgroundColor": "black", "color": "white" });
    $(".bordered").css("border", "1px solid black");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bordered">
    <h1>Header</h1>
    <p id="myParagraph">This is some paragraph text</p>
</div>

Comments

कैसे आप उदाहरण के लिए एक चर के रूप में एक मूल्य जोड़ सकता हूँ, paddingTopके रूप में एक्स पिक्सल की संख्या? मेरे द्वारा किए गए हर प्रकार के सिंटैक्स में त्रुटि हुई है।

— मेंटलिस्ट

कोई बात नहीं। समझे:$("#main").css({paddingTop: (var_name+20) + "px"});

— मेंटलिस्ट

Answer 2

आप या तो कर सकते हैं:

$("h1").css("background-color", "yellow");

या:

$("h1").css({backgroundColor: "yellow"});

Comments

{"backgroundColor": "yellow"}मान्य है, हालांकि बहुत ही कम है।

— TGR

@ user449914: आपको किसी ऑब्जेक्ट के शाब्दिक {foo: "bar"}अर्थ में संपत्ति के नामों के बारे में उद्धरण देने की आवश्यकता नहीं है - जैसा कि है {"foo": "bar"}।

— TGR

Answer 3

कुछ बातों को स्पष्ट करने के लिए, क्योंकि कुछ उत्तर गलत जानकारी प्रदान कर रहे हैं:

---

JQuery .css () विधि कई मामलों में DOM या CSS संकेतन के उपयोग की अनुमति देती है। तो, दोनों backgroundColorऔर background-colorकाम हो जाएगा।

इसके अतिरिक्त, जब आप .css()तर्कों के साथ कॉल करते हैं तो आपके पास दो विकल्प होते हैं कि तर्क क्या हो सकते हैं। वे या तो एक सीएसएस संपत्ति और उसके मूल्य का प्रतिनिधित्व करने वाले 2 अल्पविराम से अलग तार हो सकते हैं, या यह सीएसएस गुण और मूल्यों के एक या एक से अधिक प्रमुख मूल्य जोड़े वाले एक जावास्क्रिप्ट ऑब्जेक्ट हो सकते हैं।

निष्कर्ष में आपके कोड के साथ केवल एक चीज गलत है एक लापता है }। लाइन को पढ़ना चाहिए:

$("#myParagraph").css({"backgroundColor":"black","color":"white"});

आप घुंघराले कोष्ठक को बाहर नहीं छोड़ सकते, लेकिन आप कोट्स को चारों ओर से backgroundColorऔर बाहर छोड़ सकते हैं color। यदि आप उपयोग करते हैं background-colorतो आपको हाइफ़न के कारण इसके चारों ओर उद्धरण देना होगा।

सामान्य तौर पर, अपनी जावास्क्रिप्ट वस्तुओं को उद्धृत करना एक अच्छी आदत है, क्योंकि यदि आप किसी मौजूदा कीवर्ड को उद्धृत नहीं करते हैं तो समस्याएँ उत्पन्न हो सकती हैं ।

---

एक अंतिम नोट यह है कि jQuery के बारे में (।) विधि

$(handler);

का पर्यायवाची है:

$(document).ready(handler);

साथ ही तीसरे अनुशंसित फॉर्म के साथ नहीं।

इसका मतलब है कि $(init)पूरी तरह से सही है, क्योंकि initउस उदाहरण में हैंडलर है। इसलिए, initजब डोम का निर्माण किया जाएगा तो निकाल दिया जाएगा।

Answer 4

जब आप jQuery के साथ एक से अधिक css प्रॉपर्टी का उपयोग कर रहे हैं तो आपको शुरू में और अंत में घुंघराले ब्रेस का उपयोग करना चाहिए। आपको अंतिम कर्ली ब्रेस याद आ रहे हैं।

function init() {
 $("h1").css("backgroundColor", "yellow");

 $("#myParagraph").css({"background-color":"black","color":"white"});

 $(".bordered").css("border", "1px solid black");
}

आप इस jQuery CSS चयनकर्ता ट्यूटोरियल पर एक नज़र डाल सकते हैं ।

Answer 5

यह .css()विधि सीएसएस गुणों को खोजने और सेट करने के लिए सुपर सरल बनाती है और अन्य तरीकों जैसे .animate () के साथ संयुक्त है, आप अपनी साइट पर कुछ शांत प्रभाव बना सकते हैं।

अपने सरलतम रूप में, .css()विधि मिलान तत्वों के एक विशेष सेट के लिए एकल सीएसएस संपत्ति सेट कर सकती है। आप संपत्ति और मूल्य को तार के रूप में पास करते हैं और तत्व के सीएसएस गुण बदल जाते हैं।

$('.example').css('background-color', 'red');

यह 'उदाहरण' की श्रेणी वाले किसी भी तत्व के लिए 'पृष्ठभूमि-रंग' संपत्ति को 'लाल' में सेट करेगा।

लेकिन आप एक समय में केवल एक संपत्ति बदलने तक सीमित नहीं हैं। ज़रूर, आप समान jQuery ऑब्जेक्ट्स का एक गुच्छा जोड़ सकते हैं, प्रत्येक एक समय में सिर्फ एक संपत्ति बदल सकता है, लेकिन यह DOM को कई, अनावश्यक कॉल कर रहा है और बहुत बार दोहराया गया कोड है।

इसके बजाय, आप .css()विधि को एक जावास्क्रिप्ट ऑब्जेक्ट पास कर सकते हैं जिसमें कुंजी / मान जोड़े के रूप में गुण और मूल्य शामिल हैं। इस तरह, प्रत्येक संपत्ति को एक ही बार में jQuery ऑब्जेक्ट पर सेट किया जाएगा।

$('.example').css({
    'background-color': 'red',
    'border' : '1px solid red',
    'color' : 'white',
    'font-size': '32px',
    'text-align' : 'center',
    'display' : 'inline-block'
});

यह '.example' तत्वों पर इन सभी CSS गुणों को बदल देगा।

Answer 6

बस जोड़ना चाहते थे कि सीएसएस विधि के साथ मूल्यों के लिए संख्याओं का उपयोग करते समय आपको उन्हें एपोस्ट्रोफ के बाहर जोड़ना होगा और फिर एपोस्ट्रोफ में सीएसएस इकाई को जोड़ना होगा ।

$('.block').css('width',50 + '%');

या

var $block = $('.block')    

$block.css({ 'width': 50 + '%', 'height': 4 + 'em', 'background': '#FFDAB9' });

Answer 7

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
      $( document ).ready(function() {
         $('h1').css('color','#3498db');
      });
    </script>
    <style>
      .wrapper{
        height:450px;
        background:#ededed;
        text-align:center
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <h1>Title</h1>
    </div>
  </body>
</html>

Answer 8

$। 454545 "," पैडिंग ":" 8 पीएक्स "});

Comments

थोड़ी व्याख्या भी मदद करनी चाहिए।

— तिमिअतो

Answer 9

$(function(){ 
$('.bordered').css({
"border":"1px solid #EFEFEF",
"margin":"0 auto",
"width":"80%"
});

$('h1').css({
"margin-left":"10px"
});

$('#myParagraph').css({
"margin-left":"10px",
"font-family":"sans-serif"
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bordered">
<h1>Header</h1>
<p id="myParagraph">This is some paragraph text</p>
</div>

Comments

हालांकि यह कोड प्रश्न का उत्तर दे सकता है, लेकिन समस्या को हल करने के तरीके के बारे में जानकारी प्रदान करने से इसकी दीर्घकालिक मूल्य में सुधार होता है।

— L_J

Answer 10

गलत कोड:$("#myParagraph").css({"backgroundColor":"black","color":"white");

इसके "}"बाद गायब है white"

इसे बदलो

 $("#myParagraph").css({"background-color":"black","color":"white"});

Comments

आपने केवल सबसे लोकप्रिय उत्तर को दोहराया, केवल 3 1/2 साल बाद।

— कर्टिस पैट्रिक