Problème d'accès à la propriété display d'un div

[leup]

bonjour,

j'ai rencontré un petit problème en développant une page web. (enfin en reprenant le dév d'une vieille page bugguée donc faites pas trop attention à l'usage du tableau ^^)

voilà le code d'un calque, qui n'est pas affiché par défaut, et que l'on fait apparaitre uniquement en cliquant sur un bouton (voir code plus bas)

Code : Tout sélectionner

<div id="imgblock" style="display: none;" align="center">
        <table width="400px">
          <tr>		
            <td colspan="3">Attention ! L'image que vous souhaitez insérer doit déjà être uploadé sur un espace web ! Vous ne pouvez pas lier une image qui se trouve sur votre disque dur avec un chemin du type <i>c:\mes images\monimage.jpg</i>. Ca ne marchera pas ! L'url doit être du type <i>http://www.monsite.com/monimages.jpg</i>. En cas de soucis, n'hésitez pas à contacter l'<a href="mailto:">admin</a></td>
          </tr>
          <tr>
            <td>Url&nbsp;:&nbsp;</td>
            <td><input type="text" id="urlimg" name="urlimg" size="50"></td>			    
            <td><input type="button" onClick="insertImg()" value="Ajouter"></td>
          </tr>
        </table>
      </div>

Code : Tout sélectionner

<input type="button" class="button" name="addbbcode14" value="Img" style="width: 40px"  onClick="document.getElementById('imgblock').style.display=(document.getElementById('imgblock').style.display=='none'?'block':'none');" /

Avec ce code, tout va bien. Ca marche impec'. Dans ma grande refonte, je me sus dit "Hé ! Que fout ce "display:none" là ? je vais le mettre dans ma feuille de style CSS ! (en fait une balise style incorporé au head de la page) donc, je rajoute dans mes styles un truc du genre :

Code : Tout sélectionner

#imgblock { display:none; }

et là le truc bizzarre, c'est qu'avec cette modif, la première fois qu'on clique sur le bouton pour rendre visible le div imgblock, ben il se passe rien. Pourquoi ? Parce que la propriété display est "" (vide quoi, non définie). Quand je fais un "alert(document.getElementById('imgblock').style.display)" ça me dit "". Une fois avoir cliqué sur le bouton, on retrouve bien "none" et "block" mais au tout premier coup c'est "". alors que si je définis le "display: none" directement dans la propriété style de la balise div, là ça marche dès le premier coup..

bizzarre non ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

[Benoit]

Non, enfin c'est normal. Quand tu interroges

Code : Tout sélectionner

document.getElementById('imgblock').style.display

tu demandes le contenu du style de l'élément. C'est-à-dire au départ ce que tu as mis dans l'attribut style. En l'occurence, rien.

Par contre, quand déclares un style dans ta feuille de style, par contre, tu ne l'ajoutes pas à un élément, mais à un sélecteur qui est analysé dynamiquement sur tout le document. Là, par chance, il ne correspond qu'à un seul élément (puisque c'est un sélecteur d'ID), mais rien n'oblige à ce que ce soit le cas. Tu pourrais aussi n'avoir aucun élément avec cet ID, mais le style existerait toujours.

Deux solutions à ton problème : changer l'ID de ton élément plutôt que son style (dans ce cas, ce serait peut-être mieux d'utiliser une classe). Ou vérifier le style réel appliqué en fin de cascade avec getComputedStyle(), mais je crois que ça ne fonctionne pas dans IE.

[calimo]

(enfin en reprenant le dév d'une vieille page bugguée donc faites pas trop attention à l'usage du tableau ^^)

N'est-ce pas une magnifique occasion de virer ce tableau qui, dans son utilisation présente, ne me semble guère justifié ? Les utilisateurs de lecteurs d'écran en profiteront réellement

[lpgc]

bonjour,

voici peut être une solution qui ouvre beaucoup de possibilités

Code : Tout sélectionner

HTML :
<input type="button" class="button" name="addbbcode14" value="Img" style="width: 40px"  onClick="imgShow(1,'#imgblock');">

Javascript :
function imgShow(ifs,sSelector) // ifs : numéro de séquence de la feuille de style 0, 1, 2 ...
{
	var orules=document.styleSheets[ifs].cssRules? document.styleSheets[ifs].cssRules: document.styleSheets[ifs].rules;
	for (i=0; i<orules.length; i++){
		if(orules[i].selectorText.toLowerCase()==sSelector){ 
			orules[i].style.display = (orules[i].style.display =='none')?'block':'none';
			break;
		}
	}
}

Un test se trouve à l'adresse :
http://www.dvdlib.be/utility/tips/style_divnone.htm

Cordialement
Christian


Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)