recuperation en JS du color du body definie via une CSS

maxxfly · Message par **maxxfly** » 07 déc. 2004, 17:57

Hello
voici mon probleme
j'ai le fgcolor definie via une css :
<style>
body {

background-color: blue;
color: #aaaaaa
</style>

je peux en javascript recupere le backgroundcolor via document.body.bgColor

document.body.fgColor me renvoie #000000

pas grave, je decide de passer par
document.body.style.backgroundColor
et son pote pour recuperer fgColor
mais la, j'ai meme un probleme pour recuperer backgroundColor

<html>
<style>
body {
padding: 0;
margin: 15;
text-align: center;
background-color: blue;
color: #a00000
</style>
<script>
function brocoli()
{
window.alert(document.body.style.backgroundColor);
document.body.style.backgroundColor = "red";
window.alert(document.body.style.backgroundColor);

}
</script>
<body onload="brocoli();" bgcolor="#223322">

<a href="javascript:brocoli();">TEST</a>
</body>
</html>

au premier coup, le fond est bien bleu, et lors de l'appel de la fonction brocoli, document.body.style.backgroundColor est bien vide
puis en lui attribuant une valeur, le fond passe au rouge et je peux recuperer la valeur en JS

je tourne en rond

vous avez pas une methode pour connaitre la valeur d'un fgcolor definie via une CSS????
et pourquoi ce delire avec le document.body.style.backgroundColor

Merchi

PsyDk · Message par **PsyDk** » 07 déc. 2004, 18:31

En javascript, l'attribut « style » des éléments (x)html permet d'accéder au style embarqué de cet élément. Il ne renseigne pas sur le style provenant de la feuille de style.

Code : Tout sélectionner

div { background-color: red; }

Code : Tout sélectionner

<div id="Plop">blabla</div>

Code : Tout sélectionner

alert(document.getElementById("plop").style.backgroundColor);

Le message d'alerte est vide, car aucun style embarqué dans l'élément div n'est présent.

Code : Tout sélectionner

<div id="Plop" style="background-color: green">blabla</div>

Cette fois le message d'alerte indiquera « green ».

maxxfly · Message par **maxxfly** » 07 déc. 2004, 18:38

cool!!! merci pour la reponse

ca repond a mon deuxieme probleme
mais par rapport a mon probleme probleme, y'avait vraiment aucune possibilite de recuperer le fg_color que j'ai definie en CSS alors que j'ai reussi a recuperer le bg_color ?

olab · Message par **olab** » 07 déc. 2004, 18:58

essaye avec document.body.text

maxxfly · Message par **maxxfly** » 07 déc. 2004, 19:02

pareil que

document.body.fgColor

c a d "000000"

Bobe · Message par **Bobe** » 08 déc. 2004, 04:53

Code : Tout sélectionner

alert(getComputedStyle(document.body, null).backgroundColor);

Attention, ça te renverra la valeur calculée de la propriété, et non la valeur définie dans ta feuille de style. Par exemple, pour la couleur 'blue'. Mozilla te renverra quelque chose comme: 'rgb(0, 0, 128)'
ça marchera pas avec IE. Pour lui, essaie:

Code : Tout sélectionner

alert(document.body.currentStyle.backgroundColor);

mais je promet rien..

Et si tu veux la valeur exacte indiquée dans la feuille de style:

Code : Tout sélectionner

var couleur  = null;
var myStyles = document.styleSheets[0];
if( typeof(myStyles.cssRules) != 'undefined' )
{
    myStyles = myStyles.cssRules;
}
else
{
    myStyles = myStyles.rules;
}

for( var i = 0, m = myStyles.length; i < m; i++ )
{
    if( myStyles[i].type == myStyles[i].STYLE_RULE && myStyles[i].selectorText == 'body' )
    {
        couleur = myStyles[i].backgroundColor;
    }
}

Dans l'hypothèse où on cherche dans la première feuille de style du document (document.styleSheets[0]) et que le sélecteur du bloc de déclaration qui déclare la valeur de la propriété 'background-color' est 'body' (body { ... } et non pas html body { ... } ou autre).

Ne marchera pas sur Opera..

http://www.yoyodesign.org/doc/w3c/dom2/ ... rview.html

maxxfly · Message par **maxxfly** » 10 déc. 2004, 15:54

merci

je me suis fais une p'tite fonction a partir de tout ca :

Code : Tout sélectionner

function return_bgcolor()
{
	if(document.body.currentStyle) { return document.body.currentStyle.backgroundColor; }
	if(getComputedStyle) { 
				var tmp_color = getComputedStyle(document.body, null).backgroundColor;
				var REG_RGB = /^rgb\((.+),(.+),(.+)\)$/;
				var r = tmp_color.match(REG_RGB);
				return "#"+ dec2hex(r[1]) +  dec2hex(r[2]) + dec2hex(r[3]); 
			     }	
}

function dec2hex(c)
{
	var tmp = Number(c).toString(16);
	return (tmp.length == 1) ?  "0"+ tmp : tmp;	
}

Geckozone

recuperation en JS du color du body definie via une CSS

recuperation en JS du color du body definie via une CSS

Qui est en ligne ?