11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu]Lister paramètres css d'un élement

bonsoir, j'essaye désespérément
d'obtenir la liste complète des attributs css d'un élément à un instant T

pour le moment, j'arrive a obtenir diverse choses....

exemple:
[object CSSStyleDeclaration]

grâce a ce code:
document.getElementById("MONID").style

ou
[object StyleSheetList]

grâce a ce code:
document.styleSheets

ou
[object CSSStyleSheet]

grâce a ce code:
document.styleSheets[1]


mais je n'arrive pas a les manipuler

ce que j'essay d'obtenir, c'est par exemple:


#madiv{
border:1px;
position:relative;
left:50px;
}

tout simplement quoi Smiley smile

je suis sur que c'est possible avec très peux de code
malheureusement mes connaissances en js sont limitées.

voilou, ci quelqu'un a une idée.....
merci
Modifié par Giz (11 Jun 2011 - 13:47)
merci pour ta réponse, ça me permet d'avancer
avec
document.getElementById("MADIV").style.cssText;

ou
MADIV.style.cssText;

j’obtiens le css....
mais de l’élément parent

en simple , mon code ressemble a ça:

<div id="SUPERDIV">
    <div id="MADIV">contenu</div>
</div>



et j’obtiens le css de "SUPERDIV", alors que j’appel bien "MADIV"
breff je suis à la ramasse Smiley lol

à savoir que j'utilise une feuille de style pour "MADIV"
alors que je n'en utilise pas pour "SUPERDIV"

c'est la bonne piste en tout cas merci

Smiley edit je viens de regarder le mdsn microsoft, et je n'avance pas..
mais je me demande, les styles de "MADIV" doivent être modifier dynamiquement au final,
alors si je les génère dynamiquement dès le début, je devrais pouvoir me passer de la feuille de style ..... et les récupérer par cette méthode....
j'ai peur d’essayer,et de me planter Smiley confused (j'ai crue avoir touver 30 fois déjà)
je vous tien au courant dès que j'aurai trouver le courage.
Modifié par Giz (11 Jun 2011 - 13:04)
Bonjour à toutes et à tous,

si cela répond à ta question :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Acces aux styles</title>
<style type="text/css">
html {
		overflow			: auto;
}
#un {
		background-color	: lightyellow;
		margin				: 10px;
		border				: 1px solid black;
		padding				: 10px;
}

#deux {
		background-color	: blue;
}
#trois {
		background-color	: red;
}
</style>

<script language="javascript" type="text/javascript" src="Show_Props.js"></script>

<!------------------------------->
<!-- Navigateur autre que MSIE -->
<!------------------------------->

<!--[if !IE]> <-->
<script type="text/javascript" language="javascript">
function test() {
	var xx = document.styleSheets;

	for (var i=0; i<xx.length; i++)
	{
		var yy = xx[i].cssRules;

		for (var j=0; j<yy.length; j++)
		{
			zz = yy[j].cssText;
			document.write("document.styleSheets[" + i + "].cssRules[" + j + "].cssText = " + zz + "<br />");
		}
	}
}
</script>
<!--> <![endif]-->

<!----------------------------->
<!-- Pour le Navigateur MSIE -->
<!----------------------------->

<!--[IF IE]>
<script type="text/javascript" language="javascript">
function test() {
	var xx = document.styleSheets;

	for (var i=0; i<xx.length; i++)
	{
		var yy = xx[i].rules;

		for (var j=0; j<yy.length; j++)
		{
			zz = yy[j].style.cssText;
			document.write("document.styleSheets[" + i + "].rules[" + j + "].style.cssText = " + zz + "<br />");
		}
	}
}
</script>
<![endif]-->
</head>

<body onload="test();">
</body>
</html>


@+[/i][/i]
oula c'est un bien long code pour un pour un newbee comme moi, Smiley smile je vais l'étudier attentivement car je suis sur qu'il m'apprendra beaucoup de chose merci.

mais entre temps , j'ai trouver une autre solution,
il fallait bien utiliser:


document.getElementById("MADIV").style.cssText;
ou
MADIV.style.cssText;


l'erreur que j'obtenais était du à une inattention de ma part, (class1 = class2... que j'avais oublier -.- class1 et class2 étant remplacer par style="les paramètre" par mon script en amont)
c'est pour ça que je croyais qu'il me renvoyais la valeur de l'élément parent.
par contre, je ne récupérais pas le fichier css effectivement. j'ai donc contourner cette difficulté en générant le style par js.

donc sujet résolue.

par contre je n'ai pas réussi a récupérer la feuil de style... ayant trouver une autre solution entre temps.
(je pense que le code d'Artemus24 résoudra ce problème).

EDIT:
Artemus24, j'ai tester ton code en situation avec plusieurs feuilles de styles,
elle ne fonctionnait pas. alors j'ai chercher pourquoi, et j'ai bien fait car c'est exactement se que je cherchais.
pour que ton script fonctionne avec plusieurs feuilles de styles il fallait juste remplacer 

        var yy = xx.cssRules; console.log(yy);

par
        var yy = xx [ i ] .cssRules; console.log(yy);
(sans espace sinon le code ne s'affiche pas je sais pas pourquoi)

merci à tous pour vos réponses
Modifié par Giz (11 Jun 2011 - 15:02)
Sujet clos
Aller à