Culoarea de fundal CSS în JavaScript

Question

Culoarea de fundal CSS în JavaScript

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

0

adăugat 06 august 2008 la 03:23 autor GateKiller editat 14 decembrie 2015 la 02:04

Vizualizări: 11

sursa

fr zh hi bn

15 răspunsuri

autor Wally Lawless · Answer 1 · 1970-01-01T05:00Z

Sau, folosind un mic jQuery:

$('#fieldID').css('background-color', '#FF6600');

0

adăugat 01 ianuarie 1970 la 05:00 autor Wally Lawless

sursa

Sunt cotele coborâte pentru că am referit la jQuery? doar curios

adăugat 19 decembrie 2013 la 07:30, autor Wally Lawless, sursa

Cel mai probabil, deoarece OP a cerut Javascript;)

adăugat 18 martie 2014 la 05:07, autor Lodder, sursa

autor tags2k · Answer 2 · 1970-01-01T05:00Z

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

0

adăugat 01 ianuarie 1970 la 05:00 autor tags2k

sursa

autor james.garriss · Answer 3 · 1970-01-01T05:00Z

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

<body>
  <script type="text/javascript">
     document.body.style.backgroundColor = "#AAAAAA";
  </script>
</body>

autor Saeed Py · Answer 4 · 1970-01-01T05:00Z

Poți să folosești:

  <script type="text/javascript">
     Window.body.style.backgroundColor = "#5a5a5a";
  </script>

0

adăugat 01 ianuarie 1970 la 05:00 autor Saeed Py

sursa

autor Mr.Pandya · Answer 5 · 1970-01-01T05:00Z

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

autor Ian Oxley · Answer 6 · 1970-01-01T05:00Z

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 01 ianuarie 1970 la 05:00 autor Ian Oxley

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 17 aprilie 2015 la 10:20, autor Juan Mendes, sursa

ermm da Javascript dar unde îl puneți? !!! nu suficient de clar

adăugat 13 august 2014 la 03:03, 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 26 septembrie 2014 la 09:52, autor TeeJay, sursa

autor David Wengier · Answer 7 · 1970-01-01T05:00Z

Î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 01 ianuarie 1970 la 05:00 autor David Wengier

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 01 iulie 2016 la 11:05, autor Catto, sursa

În testele Selenium: ((IJavaScriptExecutor) WebDriver) .ExecuteScript ("argumente [0] & zwnj; .style.background = 'galben';", webElement);

adăugat 15 martie 2018 la 05:31, 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 24 martie 2018 la 10:37, autor Bharat Mallapur, sursa

autor Ajay Gupta · Answer 8 · 1970-01-01T05:00Z

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 01 ianuarie 1970 la 05:00 autor Ajay Gupta

sursa

element.style.background-color nu este JavaScript valid. De aceea, proprietățile CSS sunt convertite în CamelCase.

adăugat 30 septembrie 2015 la 11:24, autor CrazyIvan1974, sursa

Da, da, ai dreptate! Multumesc @ CrazyIvan1974

adăugat 23 noiembrie 2015 la 02:24, autor Ajay Gupta, sursa

autor Zardiw · Answer 9 · 1970-01-01T05:00Z

Răspunsul KISS:

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

0

adăugat 01 ianuarie 1970 la 05:00 autor Zardiw

sursa

cum putem face asta pentru clasă?

adăugat 26 februarie 2015 la 08:54, autor Vignesh Subramanian, sursa

Pentru clasa

document.getElementByClass ('element')
style.background = '# DD00DD';

adăugat 04 noiembrie 2016 la 10:21, autor MD Ashik, sursa

autor bluelog · Answer 10 · 1970-01-01T05:00Z

Puteți face acest lucru cu JQuery:

$(".class").css("background","yellow");

0

adăugat 01 ianuarie 1970 la 05:00 autor bluelog

sursa

autor hamed · Answer 11 · 1970-01-01T05:00Z

poți să folosești

$('#elementID').css('background-color', '#C0C0C0');

0

adăugat 01 ianuarie 1970 la 05:00 autor hamed

sursa

@ Novocaine jQuery este scris folosind JavaScript, Da. dar încă $ nu va funcționa dacă nu includeți biblioteca jQuery;)

adăugat 11 noiembrie 2015 la 03:20, autor Vignesh Subramanian, sursa

aceasta este jQuery nu javascript

adăugat 26 februarie 2015 la 08:54, autor Vignesh Subramanian, sursa

@vignesh jQuery este JavaScript -__-

adăugat 11 noiembrie 2015 la 02:53, autor Novocaine, sursa

autor Roger Causto · Answer 12 · 1970-01-01T05:00Z

 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>

autor Jeff · Answer 13 · 1970-01-01T05:00Z

$(".class")[0].style.background = "blue";

0

adăugat 01 ianuarie 1970 la 05:00 autor Jeff

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 11 noiembrie 2015 la 02:55, 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 11 noiembrie 2015 la 04:34, autor SuperBiasedMan, sursa

autor Srikrushna Pal · Answer 14 · 1970-01-01T05:00Z

$("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

autor pragadeesh mahendran · Answer 15 · 1970-01-01T05:00Z

$('#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 01 ianuarie 1970 la 05:00 autor pragadeesh mahendran

sursa