जावास्क्रिप्ट में सीएसएस पृष्ठभूमि रंग

मैं जावास्क्रिप्ट का उपयोग कर एक HTML तत्व का सीएसएस पृष्ठभूमि रंग कैसे सेट कर सकता हूं?

0
जोड़ा संपादित
विचारों: 1

15 उत्तर

या, थोड़ा jQuery का उपयोग कर:

$('#fieldID').css('background-color', '#FF6600');
0
जोड़ा
डाउनवॉट्स हैं क्योंकि मैंने jQuery का संदर्भ दिया है? बस उत्सुक
जोड़ा लेखक Wally Lawless, स्रोत
सबसे अधिक संभावना है, क्योंकि ओपी ने जावास्क्रिप्ट के लिए कहा है;)
जोड़ा लेखक Lodder, स्रोत

var element = document.getElementById ('element');  element.style.background = '# FF00AA';

0
जोड़ा

इस स्क्रिप्ट तत्व को अपने शरीर तत्व में जोड़ें:

<body>
  <script type="text/javascript">
     document.body.style.backgroundColor = "#AAAAAA";
  </script>
</body>
0
जोड़ा

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

  <script type="text/javascript">
     Window.body.style.backgroundColor = "#5a5a5a";
  </script>
0
जोड़ा

जावास्क्रिप्ट:

document.getElementById("ID").style.background = "colorName"; //JS ID

document.getElementsByClassName("ClassName")[0].style.background = "colorName"; //JS Class

jQuery:

$('#ID/.className').css("background","colorName") // One style

$('#ID/.className').css({"background":"colorName","color":"colorname"}); //Multiple style
0
जोड़ा

यदि आप सीएसएस में अपनी सभी शैलियों इत्यादि रखते हैं और जावास्क्रिप्ट में क्लास नाम सेट / सेट कर सकते हैं तो आपको लगता है कि आपका कोड अधिक रखरखाव योग्य है।

आपका सीएसएस स्पष्ट रूप से कुछ ऐसा होगा:

.highlight {
    background:#ff00aa;
}

फिर जावास्क्रिप्ट में:

element.className = element.className === 'highlight' ? '' : 'highlight';
0
जोड़ा
यह ज्यादातर मामलों में मान्य है, लेकिन ऐसे मामलों में जहां कॉन्फ़िगरेशन में रंग (या जो भी विशेषता) परिभाषित नहीं किया गया है, या उपयोगकर्ता दर्ज किया गया है, तो आप प्रत्येक संभावित रंग के लिए सीएसएस क्लास नहीं बना सकते हैं;)
जोड़ा लेखक Juan Mendes, स्रोत
ermm हाँ जावास्क्रिप्ट लेकिन आप इसे कहां रखा ?? !!! पर्याप्त स्पष्ट नहीं है
जोड़ा लेखक Led, स्रोत
मैं कहूंगा कि यह स्पष्ट है कि इसे कहां रखा जाए - एचटीएमएल के बाद कहीं भी आप बदलना चाहते हैं।
जोड़ा लेखक TeeJay, स्रोत

आम तौर पर, सीएसएस गुणों को बिना किसी डैश के ऊंट बनाकर जावास्क्रिप्ट में परिवर्तित कर दिया जाता है। तो पृष्ठभूमि-रंग पृष्ठभूमि रंग बन जाता है।

function setColor(element, color)
{
    element.style.backgroundColor = color;
}
0
जोड़ा
मैं रंग जोड़ना चाहता हूं स्पष्ट रूप से quotes element.style.backgroundcolor = "रंग" में होना चाहिए; उदाहरण के लिए - element.style.backgroundcolor = "नारंगी"; उत्कृष्ट उत्तर
जोड़ा लेखक Catto, स्रोत
सेलेनियम परीक्षणों में: ((IJavaScriptExecutor) WebDriver) .xecuteScript ("तर्क [0] और zwnj; .style.background = 'yellow';", webElement);
जोड़ा लेखक nexoma, स्रोत
@Catto इस मामले में, रंग समारोह के लिए एक तर्क है, इसलिए यह उद्धरण में नहीं होना चाहिए। हालांकि, आप सही हैं कि सामान्य रूप से, यदि रंग सेट करते हैं, तो जेएस में डबल कोट्स आवश्यक होंगे।
जोड़ा लेखक Bharat Mallapur, स्रोत

आप इसे आजमा सकते हैं

var element = document.getElementById('element_id');
element.style.backgroundColor = "color or color_code";

उदाहरण।

var element = document.getElementById('firstname');
element.style.backgroundColor = "green";//Or #ff55ff

JSFIDDLE

0
जोड़ा
element.style.background-color मान्य जावास्क्रिप्ट नहीं है। यही कारण है कि सीएसएस गुण CamelCase में परिवर्तित कर रहे हैं।
जोड़ा लेखक CrazyIvan1974, स्रोत
ओह हाँ, आप सही हो..!! धन्यवाद @ CrazyIvan1974
जोड़ा लेखक Ajay Gupta, स्रोत

केआईएसएस उत्तर:

document.getElementById('element').style.background = '#DD00DD';
0
जोड़ा
हम कक्षा के लिए यह कैसे कर सकते हैं?
जोड़ा लेखक Vignesh Subramanian, स्रोत
वर्ग document.getElementByClass ('element') के लिए। Style.background = '# DD00DD';
जोड़ा लेखक MD Ashik, स्रोत

आप jQuery के साथ ऐसा कर सकते हैं:

$(".class").css("background","yellow");
0
जोड़ा

आप उपयोग कर सकते हैं

$('#elementID').css('background-color', '#C0C0C0');
0
जोड़ा
@ नोवोकेन jQuery जावास्क्रिप्ट का उपयोग करके लिखा गया है, हां। लेकिन अभी तक $ काम नहीं करेगा जब तक कि आप उस jQuery लाइब्रेरी को शामिल नहीं करते;)
जोड़ा लेखक Vignesh Subramanian, स्रोत
यह jQuery जावास्क्रिप्ट नहीं है
जोड़ा लेखक Vignesh Subramanian, स्रोत
@ vignesh jQuery है जावास्क्रिप्ट -__-
जोड़ा लेखक Novocaine, स्रोत

<div class="snippet" data-lang="js" data-hide="false"><div class = "स्निपेट-कोड">

 var element = document.getElementById ('element');

element.onclick = function() {
  element.classList.add ( 'पृष्ठभूमि रंग');
  
  सेटटाइमआउट (फ़ंक्शन() {
    element.classList.remove ( 'पृष्ठभूमि रंग');
  }, 2000);
};  
 .backGroundColor {
    पृष्ठभूमि रंग: हरा;
}  
 <div id = "element"> मुझे क्लिक करें </div>  
</div></div>
0
जोड़ा
$(".class")[0].style.background = "blue";
0
जोड़ा
इस प्रश्न के पर्याप्त सही उत्तर से अधिक है, और यह उत्तर अन्य उत्तरों की तुलना में कुछ भी बेहतर नहीं प्रदान करता है।
जोड़ा लेखक Novocaine, स्रोत
नोवोकेन ने कहा कि यहां बहुत सारे जवाब हैं। लेकिन भविष्य में कृपया अपने कोड को संपादित करने के बारे में और स्पष्टीकरण जोड़ने के लिए अपनी पोस्ट को संपादित करने पर विचार करें और यह समस्या का समाधान क्यों करेगा। एक उत्तर जिसमें ज्यादातर कोड शामिल होते हैं (भले ही यह काम कर रहा हो) आमतौर पर ओपी को उनकी समस्या को समझने में मदद नहीं करेगा।
जोड़ा लेखक SuperBiasedMan, स्रोत
$("body").css("background","green"); //jQuery

document.body.style.backgroundColor = "green"; //javascript

मुझे लगता है कि कई तरीके हैं जो मुझे लगता है कि यह बहुत आसान और सरल है

प्लंबर पर डेमो

0
जोड़ा
$('#ID / .Class').css('background-color', '#FF6600');

Jquery का उपयोग करके हम सीएसएस पृष्ठभूमि या किसी अन्य स्टाइलिंग को लागू करने के लिए तत्व की कक्षा या आईडी को लक्षित कर सकते हैं

0
जोड़ा