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 :

Acceder à la valeur CSS "zIndex"


Sujet :

JavaScript

  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2005
    Messages
    208
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2005
    Messages : 208
    Par défaut Acceder à la valeur CSS "zIndex"
    Bonjour tout le monde !

    Ca fait quelques jours que je galère pour récupérer le contenu d'une variable dans mon fichier CSS, la valeur zIndex.
    J'en ai besoin pour jouer sur la profondeur de différents calques visibles à l'écran.

    Les valeurs de mes variables CSS sont données dans un fichier .scc, déclaré entre les balises <head> et </head>

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <link rel="stylesheet" type="text/css" href="Calques.css" media="screen" />
    J'ai tenté plusieurs approches pour récupérer le contenu de zIndex :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    objectJavascript = document.getElementById("Calque1");
    document.getElementById('AffCalque1').value = objectJavascript.style.zIndex;
     
    document.getElementById('AffCalque1').value = document.defaultView.getComputedStyle(("Calque2",null)[zIndex]
    La première ligne me retourne une valeur vide, et la seconde me retourne "Auto".
    A noter que parfois, la première ligne me retourne tout de même la profondeur de calque correcte, impossible de savoir pourquoi ^^

    Existe il un moyen sure de retourner la valeur zIndex d'un élément?

    Merci d'avance pour vos réponses !

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    le z-index est il initialisé das nles balises ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2005
    Messages
    208
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2005
    Messages : 208
    Par défaut
    Non non, comme je l'ai expliqué plus haut, il est initialisé dans le .css chargé au début de ma page, entre les balises <head>

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    1) essaye de mettre !important dans ton css ..


    2) l'objet aura sinon par defaut le zindex de son parent
    essaye de scanner tous les objets de la page pour initialiser leur zindex :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     def = Obj.style.zIndex;
     return (def == "") ? "inherit" : def;
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2005
    Messages
    208
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2005
    Messages : 208
    Par défaut
    Plop

    !important ne change rien.
    Je n'ai pas encore testé ton petit bout de code pour scanner les objets (je regarderais demain matin, il est tard ^^), mais j'ai changé l'initialisation de mes zIndex.
    Au lieu de les initialiser dans mon fichier css, je les initialisent dans leurs balises <div>.
    C'est moins propre, mais ça fonctionne.

    D'autres idées pour accéder à mes zIndex depuis mon fichier css ?

  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    Oui quand je parlais d'initialiser, je voulais dire dans les balises

    Si taper les cssRules du fichier css avec javascript pour attribuer dynamiquement le zindex ...

    Mais c'est curieux que le !important au niveau de css ne fasse rien ...

    tu peux nous montrer une petit exemple de css et de html ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  7. #7
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2005
    Messages
    208
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2005
    Messages : 208
    Par défaut
    Le problème n'est pas au niveau de l'interprétation du contenu des variables, mes différents <div> sont bien positionnés, leur profondeur correspond bien au zIndex initialisé dans mon fichier css.
    Juste la tentative de récupération du contenu de la variable qui merdouille en retournant "auto" ou une chaîne vide.

    Un bout de mon html :
    Code : 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
     
    ### Entre les balises <head> ###
    <link rel="stylesheet" type="text/css" href="Calques.css" media="screen" />
     
    <script type="text/javascript">
           function aff()
           {
                    var id="CV";
    		objectJavascript = document.getElementById(id);
    		var prof = objectJavascript.style.zIndex;
     
    		alert("id = "+id+" et prof = "+prof);
           }
    </script>
     
    ### Entre les balises <body> ###
            <div class="Fenetre" id="CV">
    		<div class="Titre">
    			<img src="User.png" align=absmiddle />
    			<a href="#" onclick="calques('CV')">Curiculum Vitae</a>
    		</div>
    		<div class="ContenuFenetre" style="background-color:#FF8962;">
     
    			<p>
     
    				test test test test test test test!
     
    			</p>
    		</div>
     
    		<div class="Pied">
    			<a href="#" onclick="calques('CV','Accueil')">Retour au Curiculum Vitae</a>
    		</div>
     
    	</div>
    Un appel à la fonction aff() me retourne par exemple :

    id = CV et prof =
    Dans mon css, les id contenants une valeur zIndex sont déclarés comme suit :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    #CV
    {
    	left:130px;
    	top:135px;
            z-index:2;
    }

  8. #8
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    Encore une fois IE ne repsecte pas les standards :


    donc voici comment récupérer universellement le Zindex:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    function GetZindex(ObjId){
    var MonObj =document.getElementById(ObjId);
    ZI=(document.all)?MonObj.currentStyle.zIndex:window.getComputedStyle(MonObj,"").getPropertyValue("z-index");
    return ZI}
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

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