2010-09-16 25 views
111

मैं jQuery का उपयोग कर सीएसएस बदलने के लिए कोशिश कर रहा हूँ: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>

क्या मैं यहाँ याद आ रही है?

+0

इसके किसी भी काम कर रहा है? क्या आप एचटीएमएल पोस्ट कर सकते हैं? – webdad3

+2

यह तय किया गया है। जैसा कि नीचे दिया गया है, दो समाधान हैं: (1) घुंघराले ब्रेस को हटाएं और पृष्ठभूमि बदलें रंग-रंग (सीएसएस कक्षा) या मूल समस्या के लिए रंग) अंत में गायब घुंघराले पट्टी डाल दें और डीओएम/जेएस नोटेशन चुड़ैल का भी उपयोग करें काम करता है। सबको धन्यवाद! – user449914

+0

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

उत्तर

39

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

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

या:

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

'{" पृष्ठभूमि रंग ":" पीला "}' मान्य है, हालांकि अनिवार्य है। – Tgr

+0

@tgr: यह अनिवार्य क्यों है? – user449914

+0

@Tgr: आप सही हैं, बस एक अतिरिक्त संभावना दी :) – Sarfraz

169

लोग सुझाव दे रहे हैं कि है कि संपत्ति नाम मुद्दा है पर ध्यान न दें। jQuery एपीआई स्पष्ट रूप से कहा है कि या तो अंकन स्वीकार्य है:

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

यह यह करने के लिए बदलें:

$("#myParagraph").css({"backgroundColor": "black", "color": "white"}); 
http://api.jquery.com/css/

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

यहां एक कामकाजी डेमो है: http://jsfiddle.net/YPYz8/

22

कुछ चीजों को साफ़ करने के लिए, क्योंकि कुछ जवाब अनंत प्रदान कर रहे हैं रेक्ट जानकारी:


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

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

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

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

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

सामान्य रूप से, यह आपकी जावास्क्रिप्ट ऑब्जेक्ट्स, since problems can arise if you do not quote an existing keyword उद्धृत करने की एक अच्छी आदत है।


एक अंतिम ध्यान दें कि

$(handler); 

साथ पर्याय है jQuery .ready() विधि के बारे में है:

$(document).ready(handler); 

के साथ ही एक तिहाई नहीं की सिफारिश की फार्म के साथ।

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

0

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

अपने लापता "}" जब आप jQuery के साथ एकाधिक सीएसएस संपत्ति का उपयोग कर रहे है तो आप शुरुआत में घुंघराले ब्रेस का उपयोग करना चाहिए के बाद white"

इस

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

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

7

के लिए यह परिवर्तन और अंत में। आप अंत घुंघराले ब्रेस याद कर रहे हैं।

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

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

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

आप इस jQuery CSS Selector tutorial पर एक नज़र डाल सकते हैं।

0

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

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

या

var $block = $('.block')  

$block.css({'width':50 + '%', 'height':4 + 'em', 'background':'#FFDAB9'); 
0
<!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> 
संबंधित मुद्दे