123 votes

GateKiller avatar

Comment définir la couleur d'arrière-plan d'un élément HTML à l'aide des propriétés css en JavaScript ?

Demandé el 6 de Août, 2008
Quand la question a-t-elle été
63314 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

Comment puis-je définir la couleur d'arrière-plan d'un élément HTML à l'aide de css en JavaScript ?

Demandé el 6 de Août, 2008 par GateKiller

Réponses

Trop de publicités?

161voto

Ch00k avatar
Ch00k Points 5901

En général, les propriétés CSS sont converties en JavaScript en les mettant en camelCase sans aucun tiret. Ainsi, background-color devient backgroundColor .

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

// where el is the concerned element
var el = document.getElementById('elementId');
setColor(el, 'green');
Répondu el 6 de Août, 2008 par Ch00k (5901 Points )

3 votes

Avatar de Catto

Je voudrais ajouter que la couleur doit évidemment être entre guillemets element.style.backgroundColor = "couleur" ; par exemple - element.style.backgroundColor = "orange" ; excellente réponse

Commenté el 1 de Juillet, 2016 par Catto

0 votes

Avatar de nexoma

Dans les tests Selenium : ((IJavaScriptExecutor)WebDriver).ExecuteScript("arguments[0].style.background = 'yellow' ;", webElement) ;

Commenté el 15 de Mars, 2018 par nexoma

0 votes

Avatar de Bharat Mallapur

@Catto Dans ce cas, la couleur est un argument de la fonction, donc elle ne devrait pas être entre guillemets. Cependant, vous avez raison de dire que normalement, si l'on définit une couleur, des guillemets doubles seraient nécessaires en JS.

Commenté el 24 de Mars, 2018 par Bharat Mallapur

29voto

Ian Oxley avatar
Ian Oxley Points 5659

Vous trouverez peut-être que votre code est plus facile à maintenir si vous conservez tous vos styles, etc. en CSS et si vous vous contentez de définir ou de supprimer les noms de classe en JavaScript.

Votre CSS serait évidemment quelque chose comme :

.highlight {
    background:#ff00aa;
}

Puis en JavaScript :

element.className = element.className === 'highlight' ? '' : 'highlight';
Répondu el 19 de Août, 2008 par Ian Oxley (5659 Points )

2 votes

Avatar de TeeJay

Je dirais que l'endroit où le mettre est évident - n'importe où après le HTML que vous voulez modifier.

Commenté el 26 de Septembre, 2014 par TeeJay

1 votes

Avatar de Juan Mendes

Ceci est valable dans la plupart des cas, mais pas dans les cas où la couleur (ou tout autre 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 ;)

Commenté el 17 de Avril, 2015 par Juan Mendes

24voto

tags2k avatar
tags2k Points 11036 
var element = document.getElementById('element');
element.style.background = '#FF00AA';
Répondu el 6 de Août, 2008 par tags2k (11036 Points )

20voto

Wally Lawless avatar
Wally Lawless Points 3205

Ou, en utilisant un peu de jQuery :

$('#fieldID').css('background-color', '#FF6600');
Répondu el 6 de Août, 2008 par Wally Lawless (3205 Points )

0 votes

Avatar de Lodder

Très probablement, puisque le PO a demandé du Javascript ;)

Commenté el 18 de Mars, 2014 par Lodder

7voto

james.garriss avatar
james.garriss Points 3647

Ajoutez cet élément script à votre élément body :

<body>
  <script type="text/javascript">
     document.body.style.backgroundColor = "#AAAAAA";
  </script>
</body>
Répondu el 3 de Mars, 2011 par james.garriss (3647 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X