Récupérer des propriétés css

Version imprimable

27/07/2017, 23h07
Disixlis

Récupérer des propriétés css
Bonjour/Bonsoir tout le monde. J'essaye de faire une "copie" de propriété css d'un élément vers un autre. En temps normal, j'aurais par exemple fait ceci :
Code:

1 2 3 var elem = document.getElementById("..."); anotherElem.style.width = window.getComputedStyle(elem).width;
Là le problème, c'est que l’élément source, contenant le style, n'est pas inclus dans le html. Je dois donc chercher le nom de la classe qui m'intéresse, dans mon fichier stylesheet.

J'ai lu et fouillé dans la msdn et j'ai trouvé quelques trucs intéressants comme document.styleSheets (qui renvoie un tableau de toutes les feuilles de style inclus dans la page) et cssRules mais je ne vois pas du tout comment m'en servir :/. J'ai aussi lu ceci mais je ne vois pas à quoi correspond précisément "rules[0]"

Donc, pouvez-vous m'expliquer comment faire ?

Pour les "détourneurs" de problèmes :
Je ne veux pas utiliser une librairie, un framework, une api ou chépa quoi et cetera. De plus, le code doit être compris par la plupart des navigateurs.

Je vous remercie.
27/07/2017, 23h40
Beginner.

Salut,

Je ne suis pas sûr d'avoir compris le problème...

Avant tu faisais "...une "copie" de propriété css d'un élément vers un autre..."...

Mais maintenant le style en question correspond à une class, c'est ça ? Mais dans ce cas pourquoi ne pas simplement ajouter cette class à l'autre élément ?
27/07/2017, 23h55
Disixlis
En gros pour faire simple, j'ai un fichier css contenant ceci :
Code:

1 2 3 4 5 6 7 #elem /* ou .elem */ { color:white; transition: color 1s; .... }
J'aimerais appliquer ces propriété à par exemple ceci :
Code:

1 2 <div id="blabla" > </div>
sans devoir faire cela :
Code:

1 2 <div id="elem"> </div>
J'espère que c'est un peu plus clair de cette façon ?
27/07/2017, 23h59
Beginner.

Ben oui alors pourquoi ne pas simplement ajouter la class "elem" à l’élément voulu ?
28/07/2017, 00h15
Beginner.

cssText : "body { background-color: rgb(0, 0, 255); }"

Citation:

Envoyé par Disixlis

J'ai lu et fouillé dans la msdn et j'ai trouvé quelques trucs intéressants comme document.styleSheets (qui renvoie un tableau de toutes les feuilles de style inclus dans la page) et cssRules mais je ne vois pas du tout comment m'en servir :/. J'ai aussi lu ceci mais je ne vois pas à quoi correspond précisément "rules[0]"

Bonne question... J'ai fait un test : http://jsbin.com/vesojikawe/edit?html,output et je crois bien que rules est équivalent à cssRules... Mais je crois qu'il vaut mieux utiliser ce dernier (l'autre étant propre à IE je crois...).

rules[0] ---> désigne la première règle css contenu dans "oStyleSheet", on a oStyleSheet.rules[0].cssText = "body { background-color: rgb(0, 0, 255); }"
28/07/2017, 00h16
Disixlis
Bon d'accord alors ce n'est pas aussi simple que ça... j'ai voulu ne pas complexifier la chose mais cela crée sûrement un manque d'informations. Je ne peux pas faire la chose ci-dessous (si c'est bien ce que tu penses) :
Code:

1 2 <div id="blabla" class="tata"> </div>
J'ai créé un utilitaire qui permet d'aligner des div sur une grille modulable (un peu comme bootstrap)

L'utilisateur défini ça div comme ceci :
Code:

1 2 <div id="py-name" class="x-y-w-h"></div>
où
py -> préfixe pour prendre en compte ou non, l'élément dans l'utilitaire Pyrite
name -> nom de l'objet
x -> position x sur la grille
y -> position y sur la grille
w -> largeur en block
h -> hauteur en block

Tout est fait pour qu'au final le site soit responsif tout en gardant certains ratios. Mais j'ai voulu pousser la chose plus loin et j'ai rajouté un paramètre "nom de classe de style" après le paramètre "h". Et du coup maintenant j'aimerais appliquer les caractéristiques définies par l'utilisateur sur le/les élément(s) en question.
28/07/2017, 00h27
Disixlis
Citation:

Envoyé par Beginner.

Bonne question... J'ai fait un test : http://jsbin.com/vesojikawe/edit?html,output et je crois bien que rules est équivalent à cssRules... Mais je crois qu'il vaut mieux utiliser ce dernier (l'autre étant propre à IE je crois...).

rules[0] ---> désigne la première règle css contenu dans "oStyleSheet", on a oStyleSheet.rules[0].cssText = "body { background-color: rgb(0, 0, 255); }"

J'ai compris que c'était la première régles, mais je veux dire, la régle de quoi ? comment sait-on si on est dans un élément body p ou div ?
Par exemple si j'ai ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 body { blabla: x; okta: y; } p { color:naqua; miam: nop; }
Quel est la troisième règle ? (color:naqua ?) Comment savoir de quel élément elle provient entre body et p ?

Pour moi ils sont pas toujours très clair sur ce site :weird:
28/07/2017, 00h34
Beginner.

Désolé, je n'ai toujours pas compris mais ça va venir...

Par exemple si on a ça : <div id="py-name" class="x-y-w-h-maClass"></div> est-ce que cela signifie qu'il y a une class "maClass" défini dans une feuille de style et que veux "copier" le style correspondant à cette class pour pour pouvoir l'appliquer aux éléments voulus ?
28/07/2017, 00h50
Beginner.
Citation:
Envoyé par Disixlis

J'ai compris que c'était la première régles, mais je veux dire, la régle de quoi ? comment sait-on si on est dans un élément body p ou div ?
Par exemple si j'ai ceci :

Code:

1 2 3 4 5 6 7 8 9 10 11 12 body { blabla: x; okta: y; } p { color:naqua; miam: nop; }

Quel est la troisième règle ? (color:naqua ?) Comment savoir de quel élément elle provient entre body et p ?
Tu confond "règle" avec "propriété:valeur de la propriété", dans ton exemple on a deux règles :

1- body {}
2- p {}

Regarde ce test pour comprendre : http://jsbin.com/vesojikawe/edit?html,console,output
28/07/2017, 00h54
Disixlis
Citation:

Envoyé par Beginner.

Désolé, je n'ai toujours pas compris mais ça va venir...

Par exemple si on a ça : <div id="py-name" class="x-y-w-h-maClass"></div> est-ce que cela signifie qu'il y a une class "maClass" défini dans une feuille de style et que veux "copier" le style correspondant à cette class pour pour pouvoir l'appliquer aux éléments voulus ?

Dans ce cas reprenons ton exemple, l'utilisateur à deux div :
Code:

1 2 3 <div id="py-name" class="5-7-10-5-maClass"></div> <div id="py-name" class="5-9-10-10-maClass"></div>
Ces deux div doivent avoir le même style déclaré ci-dessous
Code:

1 2 3 4 5 .maClass { background-color:#f55; }
On garde le but des classes donc il ne faut pas faire ceci :
Code:

1 2 3 4 5 6 7 8 9 10 .5-7-10-5-maClass { background-color:#f55; } .5-9-10-10-maClass { background-color:#f55; }
Le but est que le style "maClass" soit attribué à .5-7-10-5-maClass et .5-9-10-10-maClass via le javascript

Je sais pas si c'est plus clair x)

Edit: ok j'ai compris ce qu'est un règle, ~~j'ai du sauter ce chapitre du css :mrgreen:~~ mais on ne peut tout de même pas savoir le "nom" de la règle ?
Re-edit : ah bah si ducoup je pense que c'est surement la solution à mon problème :)
28/07/2017, 01h06
Disixlis

J'avais la solution sous mes yeux... un GRAND merci à toi ! Je vais mettre ça en place :)

Edit : Ok donc maintenant que j'ai la solution, j'ai des petits problèmes pour l'appliquer. Je vais mettre le problème au début du post pour plus de visibilité.
28/07/2017, 01h18
Beginner.
Citation:

Envoyé par Disixlis

Edit: ok j'ai compris ce qu'est un règle, ~~j'ai du sauter ce chapitre du css :mrgreen:~~ mais on ne peut tout de même pas savoir le "nom" de la règle ?
Re-edit : ah bah si ducoup je pense que c'est surement la solution à mon problème :)

Oui regarde cet autre test : http://jsbin.com/vesojikawe/edit?html,console cette fois-ci j'ai ajouté une règle avec une class .elem et j'affiche aussi le style...

Citation:

Envoyé par Disixlis

Le but est que le style "maClass" soit attribué à .5-7-10-5-maClass et .5-9-10-10-maClass via le javascript

Eh bien oui alors via JS tu peux simplement ajouter cette class au deux div et tu obtiens :
Code:

1 2 3 <div id="py-name" class="5-7-10-5-maClass maClass"></div> <div id="py-name" class="5-9-10-10-maClass maClass"></div>
C'est mieux, plus facile et plus concis que si tu copies le style correspondant à la class maClass et que tu l'ajoutes aux deux div en style inline...
28/07/2017, 01h22
Disixlis

1 pièce(s) jointe(s)

Oh mon d****... je me suis pris la tête pour rien ! Je suis bouche bée... Bon bah j'aurais finalement fais tout ça pour rien, au moins j'aurais appris des choses :ptdr:

Merci pour ton aide et ta patience.

Sujet résolu !

Pièce jointe 297907

:salut:

Autre possibilité :

Code:

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
    * {
      box-sizing: border-box;
    }
 
                /* code du test */
 
                .maClass {
                        padding: 3px;
                        background-color: #f55;
                        border: 1pt solid grey;
                }
                
                /* fin code du test */
                
  </style>
  <script>
    'use strict';
                
    document.addEventListener( "DOMContentLoaded", ev => {
                        
      // code du test
                        
                        for ( const elem of Array.from( document.querySelectorAll( "[id]" ) ) ){
                                if ( elem.id.slice( 0, 3 ) === "py-" ){
                                        let
                                                elemDatas = elem.classList[ 0 ].split( "-" );
                                                
                                                elem.style.position = "relative"; // indispensable !
                                                
                                                elem.style.top = elemDatas[ 0 ] + "px";
                                                elem.style.left = elemDatas[ 1 ] + "px";
                                                elem.style.width = elemDatas[ 2 ] + "px";
                                                elem.style.height = elemDatas[ 3 ] + "px";
                                                elem.setAttribute( "class", elemDatas[ 4 ] );                           
                                }
                        }
                        
                        // fin code du test
      
    }, false );
    
    window.addEventListener( "load", ev => {
                        
                        // code du test
                        
                        
                        // fin code du test
                        
    }, false );
  </script>
</head>
<body>
	<main>
 
		<div id="py-name" class="5-7-200-50-maClass">Hello !</div>
 
		<div id="py-name" class="50-90-200-50-maClass">Bonjour !</div>
 
	</main>
</body>
</html>

28/07/2017, 01h28
Beginner.

hihihi... Oui c'est pour ça que j'avais du mal à comprendre... Mais par contre tu ne t'aies pas pris la tête pour rien, on a appris des choses quand même...

Citation:

Envoyé par danielhagnoul

:salut:

Autre possibilité :

Code:

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
    * {
      box-sizing: border-box;
    }
 
                /* code du test */
 
                .maClass {
                        padding: 3px;
                        background-color: #f55;
                        border: 1pt solid grey;
                }
                
                /* fin code du test */
                
  </style>
  <script>
    'use strict';
                
    document.addEventListener( "DOMContentLoaded", ev => {
                        
      // code du test
                        
                        for ( const elem of Array.from( document.querySelectorAll( "[id]" ) ) ){
                                if ( elem.id.slice( 0, 3 ) === "py-" ){
                                        let
                                                elemDatas = elem.classList[ 0 ].split( "-" );
                                                
                                                elem.style.position = "relative"; // indispensable !
                                                
                                                elem.style.top = elemDatas[ 0 ] + "px";
                                                elem.style.left = elemDatas[ 1 ] + "px";
                                                elem.style.width = elemDatas[ 2 ] + "px";
                                                elem.style.height = elemDatas[ 3 ] + "px";
                                                elem.setAttribute( "class", elemDatas[ 4 ] );                           
                                }
                        }
                        
                        // fin code du test
      
    }, false );
    
    window.addEventListener( "load", ev => {
                        
                        // code du test
                        
                        
                        // fin code du test
                        
    }, false );
  </script>
</head>
<body>
	<main>
 
		<div id="py-name" class="5-7-200-50-maClass">Hello !</div>
 
		<div id="py-name" class="50-90-200-50-maClass">Bonjour !</div>
 
	</main>
</body>
</html>

Ça ressemble à 90% à ce que j'ai fait, je setAttribute c'est sympa :) je vais peut être prendre cette méthode car j'ai peur qu'avec la première solution, des risques de "collisions" surviennent si l'utilisateur défini dans .maClass -> width : 20px; et d'un autre coté dans .5-7-200-50 -> width: 50px; généré par le script.