problème de Style: véritable casse-tete! Help

problème de Style: véritable casse-tete! Help - HTML/CSS - Programmation

Marsh Posté le 10-05-2006 à 21:57:58    

slt,  
 
dans le head j'ai:

Code :
  1. .calque {width: 100; height: 100; };


dans le body j'ai:

Code :
  1. <div id="Div1" style="width:500; height:250;">
  2. <div id="Div2"  class="calque">

"  
lorsqu'un evenement se produit sur un calque, je le traite dans une fonction qui notamment fait ceci:

Code :
  1. document.all("textbox1" ).value = parseInt(event.srcElement.style.width);

 
 
pour le DIV1: ça affiche correctement la valeur -> 500
pour le DIV2: ça affiche NaN    :??:  
 
je ne comprends pas pourquoi!  
la seul différence entre les deux DIV est que le style est défini par une class dans le second.
 
 
P.S. j'ai simplifié le code pour cibler le problème, mais je précise que seuls les paramètres "width" et "height" posent problème dans ma classe, les autres jouent leur role parfaitement.
 
Edited: codé pour I.E.


Message édité par namerh le 10-05-2006 à 22:39:33
Reply

Marsh Posté le 10-05-2006 à 21:57:58   

Reply

Marsh Posté le 10-05-2006 à 23:20:20    

Parce que c'est comme ça. Et il faut toujours préciser l'unité :

.calque {width: 100px; height: 100px; }


Sinon choc nucléaire sur d'autre navigateur (voir même sous IE avec un doctype strict).
 
Pour récupérer la vraie dimension, sans passer par les CSs, utilise la propriété offsetWidth :)

Reply

Marsh Posté le 10-05-2006 à 23:26:21    

j'ai bien essayé en ajoutant les unités mais ça ne changer rien au problème :(

Reply

Marsh Posté le 10-05-2006 à 23:30:34    

Comme dit, les unités c'est autre chose. Pour la propriété style.width, ça ne va prendre que si c'est renseigné par l'attribut style. Pour obtenir la largeur, tu peux utiliser offsetWidth (et offsetHeight pour la hauteur)

Message cité 1 fois
Reply

Marsh Posté le 10-05-2006 à 23:52:07    

FlorentG a écrit :

Pour la propriété style.width, ça ne va prendre que si c'est renseigné par l'attribut style.


je ne comprends pas, tu veux dire que l'attribut style n'est pas renseigné dans le cas du 2e DIV défini avec ma class?

FlorentG a écrit :

Pour obtenir la largeur, tu peux utiliser offsetWidth (et offsetHeight pour la hauteur)

ça n'existe pas, par contre il y a clientwidth, d'après la doc en anglais que j'ai lue je ne suis pas sûr et certain que ça soit strictement équivalent en toutes circonstances au style.width.
 
De toute façon, j'aimerais comprendre pourquoi ça ne marche pas en passant par les styles!  :??:

Message cité 1 fois
Message édité par namerh le 11-05-2006 à 00:11:54
Reply

Marsh Posté le 10-05-2006 à 23:59:12    

pour celles et ceux qui veulent tester:
voici un script complet illustrant le problème (compatible I.E. seulement):
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4.  <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
  5.  <style type="text/css">
  7.   .maclass { POSITION: absolute;
  8.      TOP: 300px;
  9.      WIDTH: 300px;
  10.      HEIGHT: 200px; 
  11.      BACKGROUND-COLOR: yellow; };
  13.  </style>
  14.  <script language="javascript">
  16.   function mafct()
  17.   {
  18.    document.all("textbox" ).value = parseInt(event.srcElement.style.width);
  19.   }
  21.  </script>
  22. </head>
  23. <body>
  24.  <div id="Div1" style="POSITION: absolute;
  25.       LEFT: 200px;
  26.       WIDTH: 555px;
  27.       HEIGHT: 200px; 
  28.       BACKGROUND-COLOR: yellow;" onclick="mafct();">
  29.   style défini dans DIV
  30.  </div>
  32.  <div id="Div2" class="maclass" onclick="mafct();">
  33.   style défini avec des class
  34.  </div>
  36.  <br><input type="text" id="textbox" style="background-color:#99FFFF"><br>
  37. </body>
  38. </html>

Message cité 1 fois
Reply

Marsh Posté le 11-05-2006 à 09:50:09    

namerh a écrit :

je ne comprends pas, tu veux dire que l'attribut style n'est pas renseigné dans le cas du 2e DIV défini avec ma class?


Oui, la propriété style d'un objet DOMElement correspond à ce qu'il y a dans l'attribut style. Il est impossible à partir de la propriété style de récuperer ce qu'il est définit dans un style à part (avec des class donc). Il est donc normal que ça ne marche que pour le premier div.
 
cf. MSDN sur la propriété style :

Citation :

Represents the current settings of all possible inline styles for a given element.


"inline style" correspond donc bien à ce qu'il y a pour la div1
 
 

namerh a écrit :

ça n'existe pas


 [:johneh]  [:johneh]  [:johneh]  [:johneh]  
Euh... Biens-sûr que si, je ne sais pas quel documentation pourrie tu regarde :D Voir Element dimensions sur quirksmode.org. offsetWidth est même la meilleure méthode pour que ce soit crossbrowser. C'est même dans la MSDN, et dispo à partir d'IE 4 :)

Message cité 1 fois
Message édité par FlorentG le 11-05-2006 à 09:52:30
Reply

Marsh Posté le 11-05-2006 à 09:52:10    

namerh a écrit :

pour celles et ceux qui veulent tester:
voici un script complet illustrant le problème (compatible I.E. seulement):
 

Code :
  1. [...]



Ultra-facilement faisable pour tous les navigateurs du marché : il suffit de laisser tomber le document.all complètement naze, et de le remplacer par document.getElementById, et d'utiliser this pour référencer l'élément qui a déclencher l'événement :
 

function mafct() {
  document.getElementById("textbox" ).value = parseInt(this.style.width);    
}

Reply

Marsh Posté le 11-05-2006 à 10:36:39    

Suffit de l'arranger un peu ta fonction: si il existe un classname a ton div cliqué on va chercher la propriété width dans les styles sheets
un truc dans le genre:

Code :
  1. function mafct(obj) {
  2.   var width;
  3.   if ( ( obj.style.width == 'undefined' || obj.style.width=='') && (obj.className != 'undefined' && obj.className!='')){
  4.     theClass=obj.className;
  5.     var css = '';
  6.     if (document.styleSheets[0].cssRules){ css='cssRules';}
  7.     else if (document.styleSheets[0].rules){ css = 'rules';}
  8.     for (var j=0; j<document.styleSheets.length; j++){
  9.       for (var i=0; i<document.styleSheets[j][css].length; i++){
  10.         if (document.styleSheets[j][css][i].selectorText.substring(1,document.styleSheets[j][css][i].selectorText.length) == obj.className){
  11.           width = parseInt(document.styleSheets[j][css][i].style['width']);
  12.         }
  13.       }
  14.     }
  15.   } else if ( obj.style.width != 'undefined' && obj.style.width!=''){
  16.     width = parseInt(obj.style.width);
  17.   } else {
  18.     width= 'PB';
  19.   }
  20.   document.getElementById("textbox" ).value = width;
  21.   return 1;
  22. }


et tu oublies pas de faire tes appels comme ça:

Code :
  1. <div ... onclick="mafct(this)">...</div>


 
En plus ça doit marcher sur tous les navigateurs!

Reply

Marsh Posté le 11-05-2006 à 21:11:00    

FlorentG a écrit :

Oui, la propriété style d'un objet DOMElement correspond à ce qu'il y a dans l'attribut style. Il est impossible à partir de la propriété style de récuperer ce qu'il est définit dans un style à part (avec des class donc). Il est donc normal que ça ne marche que pour le premier div.  


ok merci pour l'info.. (pas cool l'utilisation des CSS finalement)

FlorentG a écrit :

... Euh... Biens-sûr que si, je ne sais pas quel documentation pourrie tu regarde :D Voir Element dimensions sur quirksmode.org. offsetWidth est même la meilleure méthode pour que ce soit crossbrowser. C'est même dans la MSDN, et dispo à partir d'IE 4 :)

ben mince j'ai pas de peau alors: dans la MSDN 2004 sur CD ça n'y figure pas :(  et aujourd'hui j'ai tapé dans l'aide de Dreamweaver8: idem!
 

Message cité 2 fois
Reply

Marsh Posté le 11-05-2006 à 21:11:00   

Reply

Marsh Posté le 11-05-2006 à 21:13:33    

anapajari > ça me semble lourd à gérer au premier abord mais je vais étudier ton code car je ne connaissais pas ces possibilités..  

Message cité 1 fois
Reply

Marsh Posté le 11-05-2006 à 21:14:07    

namerh a écrit :

ok merci pour l'info.. (pas cool l'utilisation des CSS finalement)
 ben mince j'ai pas de peau alors: dans la MSDN 2004 sur CD ça n'y figure pas :(  et aujourd'hui j'ai tapé dans l'aide de Dreamweaver8: idem!


Ouais ben c'est pas la dedans qu'il faut regarder hein :o

Message cité 1 fois
Reply

Marsh Posté le 12-05-2006 à 00:55:12    

namerh a écrit :

ben mince j'ai pas de peau alors: dans la MSDN 2004 sur CD ça n'y figure pas :(  et aujourd'hui j'ai tapé dans l'aide de Dreamweaver8: idem!

gatsu35 a écrit :

Ouais ben c'est pas la dedans qu'il faut regarder hein :o

ah ben alors parlons-en justement.. où faut-il regarder alors si les aides intégré à l'EDI ne sont pas ok..  
consulter la MSDN on line avec le lien aimablement donné ci dessus?
ben déja que c'est pas facile de s'y retrouver dans les aides intégrées, là faut avoir la journée pour lire! par exemple: je tape array dans la MSDN on line (il n'y a pas possibilité de restreindre la recherche au langage qu'on cherche) et là ça m'affiche 250 pages de liens!  
 
Et à propos de l'objet Array au fait, il n'existe pas en javascript??  
parce que je ne l'ai trouvé qu'en Jscript :(

Message cité 2 fois
Reply

Marsh Posté le 12-05-2006 à 09:18:47    

namerh a écrit :

anapajari > ça me semble lourd à gérer au premier abord mais je vais étudier ton code car je ne connaissais pas ces possibilités..


 :??: t'as a peine deux bouts de code, un qui teste s'il y a une classe et l'autre qui récupère directement le style!
 

namerh a écrit :

Et à propos de l'objet Array au fait, il n'existe pas en javascript??  
parce que je ne l'ai trouvé qu'en Jscript :(


Ok je comprends mieux pourquoi tu trouvais le script "lourd à gérer"... :o
 

Message cité 1 fois
Reply

Marsh Posté le 12-05-2006 à 10:04:02    

namerh a écrit :

consulter la MSDN on line avec le lien aimablement donné ci dessus?


Euh... T'es sûr que tu regarde bien ? Parce moi dans la MSDN 2003, offsetWidth y apparaît très bien :( Dans MDSN Library\Web Development\HTML and Dynamic HTML\SDK Documentation\Reference\Properties\
 

namerh a écrit :

parce que je ne l'ai trouvé qu'en Jscript :(


Oulalalalala, n'oublie pas que JScript ==== JavaScript [:le kneu] JScript est l'implémentation de Microsoft de l'ecmascript (spec ecma-262), au même titre que Javascript 1.xxx (de gecko)

Message cité 1 fois
Reply

Marsh Posté le 12-05-2006 à 15:47:35    

FlorentG a écrit :

Euh... T'es sûr que tu regarde bien ? Parce moi dans la MSDN 2003, offsetWidth y apparaît très bien :( Dans MDSN Library\Web Development\HTML and Dynamic HTML\SDK Documentation\Reference\Properties\


dans l'environnement intégré de Visual Studio je vais dans le menu help>index>je tape le mot clé recherché et ça ne trouve rien pour offsetWidth (meme sans filtre!)
 

FlorentG a écrit :


Oulalalalala, n'oublie pas que JScript ==== JavaScript [:le kneu] JScript est l'implémentation de Microsoft de l'ecmascript (spec ecma-262), au même titre que Javascript 1.xxx (de gecko)

euh en français ça veut dire quoi stp?  n'oubliez pas qu'un jour vous avez été débutant aussi

Reply

Marsh Posté le 12-05-2006 à 15:47:37    

Ca veut dire que JScript et Javascript, c'est la même chose :) C'est comme 407 et Laguna, les deux roulent sur la route, ont 4 roues, et roulent à l'essence :D

Message cité 1 fois
Reply

Marsh Posté le 12-05-2006 à 15:54:18    

FlorentG a écrit :

Ca veut dire que JScript et Javascript, c'est la même chose :) C'est comme 407 et Laguna, les deux roulent sur la route, ont 4 roues, et roulent à l'essence :D


peuvent pas donner le meme nom alors? c'est vrai rien que lorsqu'on doit choisir le language ds une balise script on a le choix entre autre entre javascript et jscript (ça laisse supposer que c'est différent :( )

Message cité 1 fois
Reply

Marsh Posté le 12-05-2006 à 15:58:26    

anapajari a écrit :

Ok je comprends mieux pourquoi tu trouvais le script "lourd à gérer"... :o

 euh 20 lignes juste pour récupérer la width d'un objet, oui je trouve que c'est un peu se compliquer la vie.. je préfère utiliser un seul mot-clé à la place, en l'occurence ce fameux offsetWidth ;)
mais ton code m'a intéressé car je ne savais pas qu'on pouvait accéder aux CSS de cette façon.
un peu d'indulgence quoi

Reply

Marsh Posté le 12-05-2006 à 16:01:47    

namerh a écrit :

peuvent pas donner le meme nom alors? c'est vrai rien que lorsqu'on doit choisir le language ds une balise script on a le choix entre autre entre javascript et jscript (ça laisse supposer que c'est différent :( )


C'est totalement marketing. Pour la balise, le mieux est de mettre :

<script type="text/javascript">


Ca met tout le monde à peu près d'accord, tout en jartant les toutes vieilles bouzes sur lesquelles le script ne marchera de toute manière pas :)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed