Discussion :

[Disixlis]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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 ?

[Disixlis]

En gros pour faire simple, j'ai un fichier css contenant ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div id="blabla" > </div>

sans devoir faire cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div id="elem"> </div>

J'espère que c'est un peu plus clair de cette façon ?

[Beginner.]

Ben oui alors pourquoi ne pas simplement ajouter la class "elem" à l’élément voulu ?

[Beginner.]

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); }"

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Disixlis]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 ?

[Beginner.]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Disixlis]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
.maClass
{
  background-color:#f55;
}

On garde le but des classes donc il ne faut pas faire ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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é.

[Beginner.]

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Disixlis]

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

Merci pour ton aide et ta patience.

Sujet résolu !

[danielhagnoul]

Autre possibilité :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

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

[Disixlis]

Autre possibilité :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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.