28172 sujets

CSS et mise en forme, CSS3

[Résolu] Sélecteur d'attributs et ie8

bonjour,

j'aimerais afficher une div en cliquant sur ouvrir et la cacher en cliquant sur fermer.

Je change pour ça un attribut (pas html) de la div : "etat".

Mon code marche sur tout les navigateur récent mais pas sur ie8 :'(. Je n'arrive pas à trouver le problème.

Je suis en entreprise donc je ne peux pas faire autrement.

Pourriez-vous m'aider svp?

voici le code :

<html>
    <head>
        <title>Test</title>
        <link href="css/index.css" rel="stylesheet" type="text/css">
        <script src="js/index.js" language="JavaScript" type="text/javascript"></script>
    </head>
    <body>
        <div id="div_1" etat="ouvert">
            <div class="lien" id="lien_div_1" onclick="changer_etat_div_1()">fermer</div>
			etat de la div 1 : <span id="s1"></span>
            <div class="contenu">
                DIV 1 CONTENU
            </div>
        </div>
    </body>
</html>



div[etat="ouvert"] .contenu
{
    display: block;
}

div[etat="fermer"] .contenu
{
    display: none;
}



var etat_div_1 = true;

function changer_etat_div_1()
{
    var text;
    var etat;
	var old_etat_div_1 = etat_div_1;
	var old_text = document.getElementById("lien_div_1").innerHTML;
	var old_etat = document.getElementById("div_1").getAttribute("etat");

    if (etat_div_1)
        {
            etat_div_1 = false;
            etat = "fermer"
            text = "ouvrir";
        }
    else
        {
            etat_div_1 = true;
            etat = "ouvert";
            text = "fermer";
        }

    document.getElementById("div_1").setAttribute("etat", etat);
    document.getElementById("lien_div_1").innerHTML = text;
	document.getElementById("s1").innerHTML = document.getElementById("div_1").getAttribute("etat");
}


j'ai essayé ça aussi :

<script language="JavaScript" type="text/javascript">
	var oEtat = document.createAttribute("etat");
	oEtat.nodeValue = "fermer";
	var oDiv = document.getElementById("div_1");
	oDiv.setAttributeNode(oEtat);
	alert('toto');
	oEtat.nodeValue = "ouvert";
	oDiv.setAttributeNode(oEtat);
</script>


mais la div ne s'affiche pas après l'alert.
Modifié par dacer08 (12 Nov 2010 - 10:36)
dacer08 a écrit :

Je change pour ça un attribut (pas html) de la div : &quot;etat&quot;.


Je sais qu'il n'existe pas, mais je suis obligé de l'utiliser.
Il suffit d'utiliser une classe, on peut en mettre plusieurs sur un élément (séparée par des espaces). Smiley cligne
Administrateur
dacer08 a écrit :


Je sais qu'il n'existe pas, mais je suis obligé de l'utiliser.


Si tu veux être en avance avec ton temps et être valide, utilise le nommage des attributs personnalisés en HTML5 :
data-etat=""

Modifié par Raphael (05 Nov 2010 - 11:28)
Patidou a écrit :
Il suffit d'utiliser une classe, on peut en mettre plusieurs sur un élément (séparée par des espaces). Smiley cligne

dacer08 a écrit :

Je suis en entreprise donc je ne peux pas faire autrement.



Raphael a écrit :

Si tu veux être en avance avec ton temps et être valide, utilise le nommage des attributs personnalisés en HTML5 :
data-etat=""


Malheureusement, je ne peux pas car il n'y a pas que etat, il existe plein d'autre attribut non html sur ma page.
dacer08 a écrit :

Malheureusement, je ne peux pas car il n'y a pas que etat, il existe plein d'autre attribut non html sur ma page.

… c'est tout l'intérêt de data- justement Smiley cligne
Ok, je pensais qu'il existait que data-etat.
Donc je peux faire data-selected, data-titre, etc aussi?

Sinon comme dis plus haut, je suis dans une entreprise, je dois faire de la porta (ie6 vers les nouveaux navigateur). Le soucis c'est que je ne peux pas toucher au code qui génère l'html.

Dans le code j'ai des attributs etat, titre, etc et je dois passer par le css pour que le bon style soit appliqué.

Donc on en revient à la question : pourquoi sur *ie8* (et pas les autre navigateurs) quand en js je change un attribut non html, le style correspondant n'est pas appliqué (alors qu'il est appliqué quand la page est chargé). Faut il faire quelque chose en javascript pour dire à ie8 qu'il faut qu'il reapplique le style?

Et merci pour vos réponses Smiley biggrin
Modifié par dacer08 (05 Nov 2010 - 12:41)
Hello,

C'est peut-être une limite d'IE8 qui ne considère pas le changement de tout attribut inconnu, ou d'un attribut n'appartenant pas à une liste précise codée en dur dans le moteur de rendu (au pif: id, className, lang et quelques autres), comme un évènement qui peut entrainer un nouveau calcul des styles (reflow). Il se peut qu'on trouve ce souci avec d'autres navigateurs aussi.
(Je ne fais que des suppositions car je ne sais pas s'il s'agit d'une limite avérée. Mais j'ai déjà croisé pas mal de bug reports du côté de Gecko ou Webkit sur ce genre de chose.)

Une solution éventuelle: travailler avec des classes plutôt qu'avec des attributs custom (qu'ils soient valides en HTML5 avec la syntaxe "data-monattribut", ou non).
Tu peux par exemple, sur un évènement DOMready (ou même un peu plus tôt), modifier le DOM pour rajouter les classes "etat-ouvert" et autres dont tu as besoin. Ainsi pour chaque élément qui a un etat="ouvert" tu ajoutes une classe "etat-ouvert".

Bien sûr ça ne marche pas si tu as aussi du code JavaScript qui modifie l'attribut "etat" de ton élément, et que tu ne peux pas non plus modifier le code JS (ou si tu peux mais ça serait pas raisonnable car casse-gueule ou trop long).
Florent V. a écrit :
Hello,

C'est peut-être une limite d'IE8 qui ne considère pas le changement de tout attribut inconnu, ou d'un attribut n'appartenant pas à une liste précise codée en dur dans le moteur de rendu (au pif: id, className, lang et quelques autres), comme un évènement qui peut entrainer un nouveau calcul des styles (reflow). Il se peut qu'on trouve ce souci avec d'autres navigateurs aussi.
(Je ne fais que des suppositions car je ne sais pas s'il s'agit d'une limite avérée. Mais j'ai déjà croisé pas mal de bug reports du côté de Gecko ou Webkit sur ce genre de chose.)

Une solution éventuelle: travailler avec des classes plutôt qu'avec des attributs custom (qu'ils soient valides en HTML5 avec la syntaxe &quot;data-monattribut&quot;, ou non).
Tu peux par exemple, sur un évènement DOMready (ou même un peu plus tôt), modifier le DOM pour rajouter les classes &quot;etat-ouvert&quot; et autres dont tu as besoin. Ainsi pour chaque élément qui a un etat=&quot;ouvert&quot; tu ajoutes une classe &quot;etat-ouvert&quot;.

Bien sûr ça ne marche pas si tu as aussi du code JavaScript qui modifie l'attribut &quot;etat&quot; de ton élément, et que tu ne peux pas non plus modifier le code JS (ou si tu peux mais ça serait pas raisonnable car casse-gueule ou trop long).


Merci, je pense que l'on va utiliser les classes vu qu'il n'y a pas d'autre solution.


Edit:

Nous avons trouvé une solution :
document.getElementById("div_1").setAttribute("class", document.getElementById("div_1").getAttribute("class"));

On fait comme si on avait changé la class donc le css est rechargé.

Merci de vos réponses, je mets le sujet en résolu.
Modifié par dacer08 (12 Nov 2010 - 10:36)
Sujet clos
Aller à