Vă mulțumim pentru susținere

Culoarea de fundal CSS în JavaScript

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

0
adăugat editat
fr zh hi bn

15 răspunsuri

Sau, folosind un mic jQuery:

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

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

0
adăugat

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

0
adăugat

Poți să folosești:
0
adăugat

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

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
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
ermm da Javascript dar unde îl puneți? !!! nu suficient de clar
adăugat autor Led
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

Î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
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
În testele Selenium: ((IJavaScriptExecutor) WebDriver) .ExecuteScript ("argumente [0] & zwnj; .style.background = 'galben';", webElement);
adăugat autor nexoma
@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

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

Răspunsul KISS:

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

Puteți face acest lucru cu JQuery:

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

poți să folosești

$('#elementID').css('background-color', '#C0C0C0');
0
adăugat
@ Novocaine jQuery este scris folosind JavaScript, Da. dar încă $ nu va funcționa dacă nu includeți biblioteca jQuery;)
adăugat autor Vignesh Subramanian
aceasta este jquery nu javascript
adăugat autor Vignesh Subramanian
@vignesh jQuery este JavaScript -__-
adăugat autor Novocaine 
 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;
}
0
adăugat 
$(".class")[0].style.background = "blue";
0
adăugat
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
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 
$("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 
$('#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