Il y a toujours eu de nombreux problèmes de compatibilité lors de l'obtention du style calculé des éléments HTML. Il existe quelques différences dans chaque navigateur Firefox et webkit (Chrome, Safari) prennent en charge la méthode standard du W3C : getComputedStyle(), tandis qu'IE6/7/. 8 ne prend pas en charge la méthode standard mais possède des propriétés privées pour l'implémenter : currentStyle, IE9 et Opera la prennent en charge. Avec ces deux méthodes et attributs, la plupart des exigences peuvent être satisfaites.
Mais pour la largeur et la hauteur adaptatives, vous ne pouvez pas obtenir la valeur calculée en utilisant currentStyle. Vous pouvez uniquement renvoyer auto, et getComputedStyle() peut renvoyer la valeur calculée. Il existe plusieurs façons de résoudre ce problème. Ce à quoi je pensais auparavant était de soustraire la valeur de remplissage de clientWidth/clientHeight, afin que la largeur et la hauteur calculées puissent être obtenues dans les navigateurs qui ne prennent pas en charge la méthode standard. Il y a quelques jours, j'ai vu que Situ Zhengmei utilisait une autre méthode, en utilisant la méthode getBoundingClientRect() pour obtenir la position de l'élément sur la page, puis en soustrayant la droite de la gauche est la largeur, et le bas moins le haut est la hauteur. J'ai apporté quelques petites modifications à son code, et le code final est le suivant :
var val = elem.currentStyle[style];
if( val === 'auto' && (style === "width" || style === "height") ){
var rect = elem.getBoundingClientRect();
if( style === "largeur" ){
return rect.right - rect.left 'px';
}else{
return rect.bottom - rect.top 'px';
}
}
return val;
}();
};
// Appelez cette méthode
var test = document.getElementById( 'test' ),
// Récupère la largeur calculée
tWidth = getStyle( test, 'width' );
Nouvelle question, si la largeur ou la hauteur de l'élément utilise des unités em ou %, la valeur renvoyée par getComputedStyle() changera automatiquement em ou % en unités px, mais currentStyle ne le fera pas, et si c'est la taille de police, elle utilise em comme unité, et renvoie 0em sous Opera, c'est vraiment effrayant !
Plus tard, j'ai découvert des problèmes de compatibilité inattendus lors de l'utilisation. Aujourd'hui, j'ai optimisé le code d'origine et résolu certains problèmes de compatibilité courants.
En JavaScript, "-" (tiret ou trait d'union) représente un signe moins, et en CSS, de nombreux attributs de style ont ce symbole, comme padding-left, font-size, etc., donc si ce qui suit le code apparaît en javascript, c'est une erreur :
Pour float, c'est un mot réservé en JavaScript. Il existe d'autres moyens alternatifs de définir ou d'obtenir la valeur float d'un élément en JavaScript. Dans les navigateurs standards, c'est cssFloat, et dans IE6/7/8, c'est le cas. styleFlotteur.
Si top, right, bottom, left n'ont pas de valeur explicite, certains navigateurs renverront une valeur auto lors de l'obtention de ces valeurs. Bien que la valeur auto soit une valeur d'attribut CSS légale, ce n'est en aucun cas ce que nous souhaitons. le résultat devrait être 0px.
Pour définir la transparence des éléments dans IE6/7/8, vous devez utiliser des filtres, tels que : filter:alpha(opacity=60). Pour les navigateurs standard, définissez simplement l'opacité directement. Une compatibilité a également été implémentée pour obtenir la transparence des éléments. Tant que vous utilisez l'opacité, vous pouvez obtenir les valeurs de transparence de tous les éléments du navigateur.
L'obtention de la largeur et de la hauteur des éléments dans IE6/7/8 a été introduite dans l'article précédent, et ne sera pas répétée ici. Une autre chose à noter est que si le style de l'élément est écrit en utilisant le style en ligne ou si l'attribut de style a été défini à l'aide de JavaScript, vous pouvez utiliser la méthode suivante pour obtenir le style calculé de l'élément :
Cette méthode est plus rapide que la lecture de la valeur de l'attribut dans getComputedStyle ou currentStyle, et doit être utilisée en premier. Bien sûr, la condition préalable est que le style soit défini par écriture en ligne (l'utilisation de javascript pour définir le style en ligne est également définie). Le code final optimisé est le suivant :
Ce qui suit est un exemple d'appel :
