IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

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


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre très actif
    Homme Profil pro
    Développeur de jeux vidéo
    Inscrit en
    Mai 2014
    Messages
    227
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Développeur de jeux vidéo
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2014
    Messages : 227
    Par défaut 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 : 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.

  2. #2
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    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 ?

  3. #3
    Membre très actif
    Homme Profil pro
    Développeur de jeux vidéo
    Inscrit en
    Mai 2014
    Messages
    227
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Développeur de jeux vidéo
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2014
    Messages : 227
    Par défaut
    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 ?

  4. #4
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    Ben oui alors pourquoi ne pas simplement ajouter la class "elem" à l’élément voulu ?

  5. #5
    Membre très actif
    Homme Profil pro
    Développeur de jeux vidéo
    Inscrit en
    Mai 2014
    Messages
    227
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Développeur de jeux vidéo
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2014
    Messages : 227
    Par défaut
    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>

    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.

  6. #6
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    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 ?

  7. #7
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut cssText : "body { background-color: rgb(0, 0, 255); }"
    Citation Envoyé par Disixlis Voir le message

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

  8. #8
    Membre très actif
    Homme Profil pro
    Développeur de jeux vidéo
    Inscrit en
    Mai 2014
    Messages
    227
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Développeur de jeux vidéo
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2014
    Messages : 227
    Par défaut
    Citation Envoyé par Beginner. Voir le message
    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

  9. #9
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    Citation Envoyé par Disixlis Voir le message
    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

  10. #10
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut


    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>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  11. #11
    Membre très actif
    Homme Profil pro
    Développeur de jeux vidéo
    Inscrit en
    Mai 2014
    Messages
    227
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Développeur de jeux vidéo
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2014
    Messages : 227
    Par défaut
    Citation Envoyé par danielhagnoul Voir le message


    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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [CSS/Javascript] Changement des propriété CSS dynamiquement
    Par heladar dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 06/02/2009, 12h33
  2. Récupérer une propriété CSS par défaut
    Par Switche dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 29/08/2007, 22h57
  3. Récupérer des propriétés système...
    Par nikalkal dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 05/05/2006, 16h51
  4. Récupérer des propriétés système en Java
    Par nikalkal dans le forum Général Java
    Réponses: 9
    Dernier message: 05/05/2006, 16h50

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo