2010-11-26 4 views
2

J'utilise la fonction Mootools More "getComputedSize" sur un élément DIV créé dynamiquement. Il fonctionne très bien dans Firefox, mais pas dans Google Chrome:Mootools getComputedSize ne fonctionne pas dans Chrome

CSS:

.resultBox { 
    width: 150px; 
    height: 100px; 
    position: absolute; 
    z-index: 1000; 
} 

Javascript:

this.resultBox = new Element('div', { 
    'class': 'resultBox' 
}); 

console.log(this.resultBox.getComputedSize().width); 

Le résultat est "150" dans FF mais dans Chrome le résultat est "NaN" .

Est-ce que quelqu'un sait comment résoudre ce problème dans Chrome sans avoir à coder le DIV dans le code HTML?

Merci à l'avance

Alex

fixe:

this.resultBox = new Element('div', { 
    'class': 'resultBox' 
}); 

this.resultBox.inject(this.container, 'top'); 

console.log(this.resultBox.getComputedSize().width); 

Injecter l'élément avant d'essayer d'utiliser cette méthode.

+1

il doit d'abord être injecté dans le dom. –

+1

FYI à la fin de la pile des appels, '.width' sera rempli par un appel à' document.defaultView.getComputedStyle (this.resultBox, null) .width'. Puisque l'élément pour lequel vous essayez de calculer des styles ne se trouve pas dans l'arborescence DOM, 'getComputedStyle' renvoie la chaîne vide dans Chrome et je pense que Opera, tandis que Firefox la calcule comme demandé. La spécification est un peu vague sur ce que les implémentations sont censées faire dans ce cas. Voir http://lists.w3.org/Archives/Public/www-style/2010Apr/0433.html –

+1

Merci pour votre aide. Je l'ai injecté dans le DOM plus tôt que je ne le faisais à l'origine et maintenant ça fonctionne très bien. – beingalex

Répondre

1

fixe:

this.resultBox = new Element('div', { 
    'class': 'resultBox' 
}); 

this.resultBox.inject(this.container, 'top'); 

console.log(this.resultBox.getComputedSize().width); 

Injecter l'élément avant d'essayer d'utiliser cette méthode.

Questions connexes