Obtenir valeur d'un style css en javascript


rottman
WRInaute passionné
WRInaute passionné
 
Messages: 2121
Inscription: 6 Jan 2004

Obtenir valeur d'un style css en javascript

Message le Mer Avr 19, 2006 18:04

Yop,

je cherche à obtenir la valeur d'un style css en javascript

<style type="text/css">
<!--
#box {
background-color: #EEEEEE;
}
-->
</style>

<script type="text/javascript">
<!--
var color = document.all.box.style.backgroundColor.value;
document.write('Couleur : '+color);
-->
</script>

Mais ça ne marche pas :?

Merci de votre aide 8)


Szarah
WRInaute accro
WRInaute accro
 
Messages: 8093
Inscription: 22 Fév 2006

Message le Mer Avr 19, 2006 18:12

Et si tu commençais par tracer un élément de classe #box ?
Il n'y a rien du tout à récupérer, là, pas d'objet à sonder.
Et oublie le .all, essaie
document.getElementByID("id-de-objet").style. etc


rottman
WRInaute passionné
WRInaute passionné
 
Messages: 2121
Inscription: 6 Jan 2004

Message le Mer Avr 19, 2006 18:19

Merci de ton aide Szarah,

Mais j'y arrive toujours pas :?

voici mon code entier :

Code: Tout sélectionner
#box {
border: #666666 1px solid;
background-color: #EEEEEE;
height: 50px;
width: 50px;
}

-->
</style>

<script type="text/javascript">
<!--
function box_click() {
   document.all.box.style.backgroundColor = '#FFFFFF';
}
-->
</script>

</head>

<body>
<div id="page">
   <div name="box" id="box" onclick="box_click()"></div>
   <script type="text/javascript">
<!--
var color = document.getElementByID("box").style.backgroundColor.value;
document.write('Couleur : '+color);
-->
</script>


reglysse
WRInaute discret
WRInaute discret
 
Messages: 150
Inscription: 19 Avr 2006

Message le Mer Avr 19, 2006 20:59

Il faut bien respecter les minuscules/majuscules en javascript.

getElementByID -> getElementById

Et à la fin ton document.write n'est pas associé à un événement donc il ne s'affiche pas. J'ai rajouté un alert() dans ta fonction box_click().

Ce code fonctionne chez moi :

Code: Tout sélectionner
<html>
<head>
<style>
#box {
border: #666666 1px solid;
background-color: #EEEEEE;
height: 50px;
width: 50px;
}

</style>

<script type="text/javascript">
<!--
function box_click() {
   document.getElementById("box").style.backgroundColor  = '#FFFFFF';
   var color = document.getElementById("box").style.backgroundColor ;
   alert('Couleur : '+color);
}
-->
</script>

</head>

<body>
<div id="page">
   <div name="box" id="box" onclick="box_click()"></div>
<script type="text/javascript">
<!--
var color = document.getElementById("box").style.backgroundColor.value;
document.write('Couleur : '+color);
-->
</script>
</body>
</html>
Dernière édition par reglysse le Mer Avr 19, 2006 21:38, édité 1 fois.


Szarah
WRInaute accro
WRInaute accro
 
Messages: 8093
Inscription: 22 Fév 2006

Message le Mer Avr 19, 2006 21:11

Bien joué, reglysse, et merci :)


Si vous avez aimé cette discussion, partagez-la sur vos réseaux sociaux préférés :

Lectures recommandées sur ce thème :



Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités