Obtenir valeur d'un style css en javascript

Répondre

Consultez la formation au référencement naturel Google de WebRankInfo / Ranking Metrics


rottman
WRInaute accro
WRInaute accro
 
Messages: 2097
Inscription: Mar Jan 06, 2004 20:11

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)
Haut

Szarah
WRInaute accro
WRInaute accro
 
Messages: 8090
Inscription: Mer Fév 22, 2006 18:24

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
Haut

rottman
WRInaute accro
WRInaute accro
 
Messages: 2097
Inscription: Mar Jan 06, 2004 20:11

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>
Haut

reglysse
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 148
Inscription: Mer Avr 19, 2006 16:51

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.
Haut

Szarah
WRInaute accro
WRInaute accro
 
Messages: 8090
Inscription: Mer Fév 22, 2006 18:24

Message le Mer Avr 19, 2006 21:11

Bien joué, reglysse, et merci :)
Haut
Répondre

Formation recommandée sur ce thème :

Formation Référencement naturel Google : apprenez une méthode efficace pour optimiser à fond le référencement naturel dans Google de façon durable... Formation animée par Olivier Duffez et Fabien Facériès, experts en référencement naturel.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.

Lectures recommandées sur ce thème :

Consultez la description détaillée des produits ou services de Google suivants : Google Toolbar, Google Related Links, Google Compute



Qui est en ligne

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

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group , traduction par phpBB-fr.com, mod SEO par phpbb-seo.com