Culoarea de fundal CSS în JavaScript

Cum pot seta culoarea de fundal CSS a unui element HTML folosind JavaScript?

 0
adăugat editat
Vizualizări: 3
sursa
fr zh hi bn

15 răspunsuri

Sau, folosind un mic jQuery:

$('#fieldID').css('background-color', '#FF6600');
0
adăugat
sursa
Sunt cotele coborâte pentru că am referit la jQuery? doar curios
adăugat autor Wally Lawless, sursa
Cel mai probabil, deoarece OP a cerut Javascript;)
adăugat autor Lodder, sursa

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

0
adăugat
sursa

Adăugați acest element de script la elementul corpului dvs.:

<body>
  <script type="text/javascript">
     document.body.style.backgroundColor = "#AAAAAA";
  </script>
</body>
0
adăugat
sursa

Poți să folosești:

  <script type="text/javascript">
     Window.body.style.backgroundColor = "#5a5a5a";
  </script>
0
adăugat
sursa

Javascript:

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
adăugat
sursa

S-ar putea să găsiți că codul dvs. este mai ușor de întreținut dacă păstrați toate stilurile dvs. etc. în CSS și setați / dezactivați doar nume de clase în JavaScript.

CSS-ul dvs. ar fi în mod evident ceva de genul:

.highlight {
    background:#ff00aa;
}

Apoi, în JavaScript:

element.className = element.className === 'highlight' ? '' : 'highlight';
0
adăugat
sursa
Acest lucru este valabil în majoritatea cazurilor, dar nu și în cazul în care culoarea (sau orice atribut) este definită în configurație sau utilizatorul introdus, nu puteți crea o clasă CSS pentru toate culorile posibile;)
adăugat autor Juan Mendes, sursa
ermm da Javascript dar unde îl puneți? !!! nu suficient de clar
adăugat autor Led, sursa
Aș spune că este evident unde să o puneți - oriunde după codul HTML pe care doriți să îl modificați.
adăugat autor TeeJay, sursa

În general, proprietățile CSS sunt convertite în JavaScript, făcându-le camelCase fără liniuțe. Deci background-color devine backgroundColor .

function setColor(element, color)
{
    element.style.backgroundColor = color;
}
0
adăugat
sursa
Aș dori să adaug culoarea evident trebuie să fie în citate element.style.backgroundColor = "culoare"; de exemplu - element.style.backgroundColor = "portocaliu"; răspuns excelent
adăugat autor Catto, sursa
În testele Selenium: ((IJavaScriptExecutor) WebDriver) .ExecuteScript ("argumente [0] & zwnj; .style.background = 'galben';", webElement);
adăugat autor nexoma, sursa
@Catto În acest caz, culoarea este un argument pentru funcție, prin urmare nu ar trebui să fie în citate. Cu toate acestea, aveți dreptate că, în mod normal, dacă setați o culoare, vor fi necesare citate în JS.
adăugat autor Bharat Mallapur, sursa

Puteți încerca asta

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

Exemplu.

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

JSFIDDLE

0
adăugat
sursa
element.style.background-color nu este JavaScript valid. De aceea, proprietățile CSS sunt convertite în CamelCase.
adăugat autor CrazyIvan1974, sursa
Da, da, ai dreptate! Multumesc @ CrazyIvan1974
adăugat autor Ajay Gupta, sursa

Răspunsul KISS:

document.getElementById('element').style.background = '#DD00DD';
0
adăugat
sursa
cum putem face asta pentru clasă?
adăugat autor Vignesh Subramanian, sursa
Pentru clasa document.getElementByClass ('element') style.background = '# DD00DD';
adăugat autor MD Ashik, sursa

Puteți face acest lucru cu JQuery:

$(".class").css("background","yellow");
0
adăugat
sursa

poți să folosești

$('#elementID').css('background-color', '#C0C0C0');
0
adăugat
sursa
@ Novocaine jQuery este scris folosind JavaScript, Da. dar încă $ nu va funcționa dacă nu includeți biblioteca jQuery;)
adăugat autor Vignesh Subramanian, sursa
aceasta este jQuery nu javascript
adăugat autor Vignesh Subramanian, sursa
@vignesh jQuery este JavaScript -__-
adăugat autor Novocaine, sursa

<div class="snippet" data-lang="js" data-hide="false"><div class = "snippet-code">

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

element.onclick = funcția() {
  element.classList.add ( 'backGroundColor');
  
  setTimeout (funcția() {
    element.classList.remove ( 'backGroundColor');
  }, 2000);
};  
 .backGroundColor {
    fundal-culoare: verde;
}
</div> </div> </div> </div> </div></div>
0
adăugat
sursa 
$(".class")[0].style.background = "blue";
0
adăugat
sursa
Există mai mult decât suficiente răspunsuri corecte la această întrebare, iar acest răspuns nu oferă nimic mai bun decât alte răspunsuri.
adăugat autor Novocaine, sursa
După cum a spus Novocaine, există multe răspunsuri aici. Dar, în viitor, vă recomandăm să editați postarea pentru a adăuga mai multe explicații despre ceea ce face codul dvs. și de ce va rezolva problema. Un răspuns care conține doar cod (chiar dacă funcționează), de regulă, nu va ajuta OP să-și înțeleagă problema.
adăugat autor SuperBiasedMan, sursa 
$("body").css("background","green"); //jQuery

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

atât de multe moduri sunt acolo Cred că este foarte ușor și simplu

Demo pe Plunker

0
adăugat
sursa 
$('#ID / .Class').css('background-color', '#FF6600');

Folosind jQuery putem direcționa clasa elementului sau ID-ul pentru a aplica CSS background sau orice alte stilizări

0
adăugat
sursa