Mettre une variable dans le background-color

**choupinou22** · 26/07/2015, 13h19

bonjour,
j' ai une table avec plusieurs champs dont un champ colors(il contient les valeurs hexa)
j'aimerai savoir si cela est possible de mettre une variable en css ,car j'ai fais un test mais je n'ai pas de couleur qui s'affiche ,ni de message d'erreur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 <style type="text/css">
 
.cells {
    font-size : 22px ;
	font-weight : bold ;
	font-variant : small-caps ;
	text-align : center ;
	background-color: $colors ;
 
 
</style>
<?php
 
$sth=$pdo->prepare("SELECT ID, COULEUR FROM TABLE WHERE ID=:id");
$sth->execute(array(':id'=>$ID));
 
while ($resultat = $sth->fetch(PDO::FETCH_ASSOC)) {   
         $colors=($resultat['COULEUR']);
....

**NoSmoking** · 26/07/2015, 22h19

Bonjour,
pourquoi ne pas mettre la valeur grâce au PHP ?

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<?php
$la_couleur = 'red';
?>
<style>
body {
  color :<?php echo $la_couleur ?>;
}
</style>

**choupinou22** · 29/07/2015, 22h12

Je vais préciser un peu plus,sur ma pages j'ai une liste déroulante qui affiche plusieurs valeurs hexadécimales venant d'une table, ce que j'aimerai c'est de pouvoir afficher la couleur qui est sélectionnée dans la liste déroulante dans une boite( ce qui me permettrait d'identifier la couleur en fonction du code hexa)pour cela que je pense passe par une variable

**NoSmoking** · 30/07/2015, 13h53

Il existe pour cela http://www.w3.org/TR/css3-color/ qui te fournit le nom en fonction du code.

Si tu veux afficher via un <select> il te faut avoir recours au javascript dans ce cas

Petit exemple simple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Sélection couleur</title>
<style>
#test{
  width:5em;
  height:5em;
  background-color:red;
}
</style>
<script>
function changeCouleur( couleur){
  var oDest = document.getElementById('test');
  oDest.style.backgroundColor = couleur;
}
</script>
</head>
<body>
  <select onchange = "changeCouleur( this.value)">
    <option value="#F00">Rouge</option>
    <option value="#0F0">Vert</option>
    <option value="#00F">Bleu</option>
  </select>
  <div id="test"></div>
</body>
</html>

Mettre une variable dans le background-color

CSS

Discussions similaires

Partager

Partager