Couleur de fond CSS en JavaScript

130

En général, les propriétés CSS sont converties en JavaScript en les rendant camelCase sans tirets. Donc background-color devient backgroundColor.

function setColor(element, color) 
{ 
    element.style.backgroundColor = color; 
}

Source

2008-08-06 12:25:54

+2

Je voudrais ajouter la couleur doit évidemment être dans l'élément de citations .style.backgroundColor = "couleur"; par exemple - element.style.backgroundColor = "orange"; excellente réponse – Catto

20

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

Source

2008-08-06 12:25:13 tags2k

19

Ou, en utilisant un peu jQuery:

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

Source

2008-08-06 13:23:42

+0

Est-ce que les downvotes sont parce que j'ai référencé jQuery? juste curieux –

+0

Très probablement, comme l'OP a demandé Javascript;) – Lodder

27

Vous trouverez peut-être votre code est plus maintenable si vous conservez tous vos styles, etc. en CSS et qui se trouve juste/noms de classe unset en JavaScript.

Votre CSS serait évidemment quelque chose comme:

.highlight { 
    background:#ff00aa; 
}

Puis en JavaScript:

element.className = element.className === 'highlight' ? '' : 'highlight';

Source

2008-08-19 11:59:40

+0

ermm oui Javascript mais où le mettez-vous ?? !!! pas assez clair – Led

+2

Je dirais que c'est évident où le mettre - n'importe où après le HTML que vous voulez changer. – TeeJay

+1

Ceci est valide dans la plupart des cas, mais pas dans les cas où la couleur (ou quel que soit l'attribut) est définie dans la configuration ou saisie par l'utilisateur, vous ne pouvez pas créer une classe CSS pour chaque couleur possible;) –

6

Ajouter cet élément de script à votre élément de corps:

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

Source

2011-03-03 21:20:56

2

BAISER Réponse:

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

Source

2013-03-01 23:57:53 Zardiw

+0

Comment pouvons-nous le faire? classe? –

+0

Pour la classe 'document.getElementByClass ('élément'). Style.background = '# DD00DD';' –

2

Vous pouvez utiliser:

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

Source

2014-01-05 12:51:06

2

Vous pouvez le faire avec JQuery:

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

Source

2014-02-10 17:13:09 bluelog

1

vous pouvez utiliser

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

Source

2014-04-11 01:34:55 hamed

+0

c'est jquery pas javascript –

+0

@vignesh jQuery * est * JavaScript -__- – Novocaine

+0

@Novocaine jQuery est écrit en JavaScript, Oui . mais $ ne fonctionnera pas à moins d'inclure cette bibliothèque jQuery;) –

5

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

 
element.onclick = function() { 
 
    element.classList.add('backGroundColor'); 
 
    
 
    setTimeout(function() { 
 
    element.classList.remove('backGroundColor'); 
 
    }, 2000); 
 
};

.backGroundColor { 
 
    background-color: green; 
 
}

<div id="element">Click Me</div>

Source

2015-04-17 16:07:45

3

Vous pouvez essayer cette

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

Exemple.

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

JSFIDDLE

Source

2015-09-03 12:21:03

+1

'element.style.background-color' n'est pas valide JavaScript. C'est pourquoi les propriétés CSS sont converties en CamelCase. – CrazyIvan1974

+0

Oh, oui vous avez raison .. !! Merci @ CrazyIvan1974 –

-1

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

Source

2015-11-11 08:44:51 Jeff

+0

Il ya plus qu'assez de réponses correctes à cette question, et cette réponse n'offre rien de mieux que d'autres réponses. – Novocaine

+0

Comme l'a dit Novocaine, il y a beaucoup de réponses ici. Mais à l'avenir, pensez à modifier votre message pour ajouter plus d'explications sur ce que fait votre code et pourquoi il résoudra le problème. Une réponse qui contient pour la plupart du code (même si cela fonctionne) ne permet généralement pas au PO de comprendre son problème. – SuperBiasedMan

0

$("body").css("background","green"); //jQuery 

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

tant de façons sont je pense qu'il est très facile et simple

Demo On Plunker

Source

2017-03-13 20:51:31

2

$('#ID/.Class').css('background-color', '#FF6600');

En utilisant jquery nous pouvons ta RGET classe ou Id de l'élément à appliquer fond css ou tout autre Stylings

Source

2017-06-23 09:56:47

-1

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

Source

2017-06-23 10:02:59

Couleur de fond CSS en JavaScript

Répondre

Questions connexes