11548 sujets

JavaScript, DOM et API Web HTML5

Bug JS non référencé ? objet.style.top et css externe

Bonjour

Je fais face ce matin à un problème qui me laisse perplexe.

Lorsque je souhaite accéder à la valeur TOP d'un DIV, javascript ne parvient pas à lire cette valeur si je la spécifie dans mon fichier css externe. La valeur est vide !

Bug rencontré avec IE8, Chrome 4 et FF3

Un cadre :
<div class="cadreArticle" id="article45" onmousedown="mafonction(this);">blabla</div>


Un fichier css externe :
div.cadreArticle 
{
  	position : absolute;
	
	top : 10px;
	left : 10px;
}


Une fonction javascript :
function maFonction(objet)
{
alert(objet.style.top); // Va m'afficher une valeur vide
}


Mon css est bien lié avec ma page HTML puisqu'avec Chrome je peux voir la configuration de chacun de mes div et que la valeur top est bien à 10px;

La solution que j'ai trouvé : Mettre la valeur de top dans la balise style, comme ceci
<div class="cadreArticle" id="article45" style="top : 10px;" onmousedown="mafonction(this);">blabla</div>


C'est vraiment frustrant n'est-ce pas ?
Je ne saurai expliqué la cause donc je m'abstiendrai ...
Mais pourquoi ne pas utiliser jquery ? 

alert($(objet).css('top'));
Je ne me sers de JQuery que pour les effets visuels évolués.
Je préfère coder mon javascript sans dépendre d'une surcouche supplémentaire.

C'est peut être une erreur en terme d'évolutivité pour mon code.
Qu'en pensez-vous ?
Comment être sur que JQuery répondra à mes attentes à l'avenir ? Comment seront supportées les nouvelles versions ? Autant de questions que je préfère éviter en maîtrisant mon code de A à Z (enfin presque).
Jquery, et spécialement jQuery Core (celui que n'utilise pas) simplifie le code et te donne accès rapidement à un tas de fonctionalités !
Tu fais encore tes appels ajax à la main, quand une ligne de jquery le fait ?
C'est bien de savoir faire les choses, mais tu ne vas pas réinventer la roue à chaque fois...

Regarde la ligne jquery que je t'ai donnée et regarde la fonction équivalente : 

function getTop(el){
if (el.currentStyle)
		var y = el.currentStyle["top"];
	else if (window.getComputedStyle)
		var y = document.defaultView.getComputedStyle(el,null).getPropertyValue('top');
	alert (y);
}


Toujours pas convaincu ?
Modifié par spiral123 (10 May 2010 - 10:54)
Sujet clos
Aller à