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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : problème de Style: véritable casse-tete! Help

namerh

slt,

dans le head j'ai:

Code :

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

dans le body j'ai:

Code :

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

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

Code :

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

Publicité

FlorentG

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

namerh

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

FlorentG

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

namerh

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

namerh

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

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<style type="text/css">
.maclass { POSITION: absolute;
TOP: 300px;
WIDTH: 300px;
HEIGHT: 200px;
BACKGROUND-COLOR: yellow; };
</style>
<script language="javascript">
function mafct()
{
document.all("textbox" ).value = parseInt(event.srcElement.style.width);
}
</script>
</head>
<body>
<div id="Div1" style="POSITION: absolute;
LEFT: 200px;
WIDTH: 555px;
HEIGHT: 200px;
BACKGROUND-COLOR: yellow;" onclick="mafct();">
style défini dans DIV
</div>
<div id="Div2" class="maclass" onclick="mafct();">
style défini avec des class
</div>
<br><input type="text" id="textbox" style="background-color:#99FFFF"><br>
</body>
</html>

Message cité 1 fois

FlorentG

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]
Euh... Biens-sûr que si, je ne sais pas quel documentation pourrie tu regarde 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

FlorentG

namerh a écrit :

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

Code :

[...]

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

anapajari

s/travail/glanding on hfr/gs;

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 :

function mafct(obj) {
var width;
if ( ( obj.style.width == 'undefined' || obj.style.width=='') && (obj.className != 'undefined' && obj.className!='')){
theClass=obj.className;
var css = '';
if (document.styleSheets[0].cssRules){ css='cssRules';}
else if (document.styleSheets[0].rules){ css = 'rules';}
for (var j=0; j<document.styleSheets.length; j++){
for (var i=0; i<document.styleSheets[j][css].length; i++){
if (document.styleSheets[j][css][i].selectorText.substring(1,document.styleSheets[j][css][i].selectorText.length) == obj.className){
width = parseInt(document.styleSheets[j][css][i].style['width']);
}
}
}
} else if ( obj.style.width != 'undefined' && obj.style.width!=''){
width = parseInt(obj.style.width);
} else {
width= 'PB';
}
document.getElementById("textbox" ).value = width;
return 1;
}

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

Code :

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

En plus ça doit marcher sur tous les navigateurs!

namerh

FlorentG a écrit :

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 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

Publicité

namerh

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

gatsu35

Blablaté par Harko

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

Message cité 1 fois

namerh

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

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

anapajari

s/travail/glanding on hfr/gs;

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"...

Message cité 1 fois

FlorentG

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

namerh

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

FlorentG

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

Message cité 1 fois

namerh

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

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

namerh

anapajari a écrit :

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

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

FlorentG

namerh a écrit :

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

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

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
Probleme liens pages php et repertoire...	Problème de perte de variable publique d'un formulaire au chargement d
problème de lecture d'un fichier en cobol	[JavaScript] Problème avec un cookie
Problème de bouton radio	[SVG] probleme dessin d'images SVG avec Batik
Problème récupération date	[mysql] Problème de jointure [résolu merci antho1983]
problème changement de page a cause d'un combobox	enorme probleme excel
Plus de sujets relatifs à : problème de Style: véritable casse-tete! Help

Page générée en 0.099 secondes