Une fonction javascript getStyle manuscrite compatible avec différents navigateurs (obtention du style d'un élément)_compétences javascript

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.

Copier le code Le code est le suivant :

var getStyle = function( elem, type ) {
renvoie 'getComputedStyle' dans la fenêtre ? getComputedStyle(elem, null)[type] : elem.currentStyle[type];
};

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 :

Copier le code Le code est le suivant :

var getStyle = function( elem, style ) {
return 'getComputedStyle' dans la fenêtre
getComputedStyle( elem, null )[style] :
function(){
style = style.replace( /-(w)/g, function( $, $1 ){
return $1.toUpperCase();
});

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 :

Copiez le code Le code est le suivant :

elem .style .margin-left = "20px";

L'écriture correcte doit être :

Copier le code Le le code est le suivant :

elem.style.marginLeft = "20px";

Ici, vous devez supprimer le soulignement en CSS et mettre en majuscule les lettres qui suivent immédiatement le soulignement, communément appelé "camel case" La méthode d'écriture, que vous utilisiez javascript pour définir ou obtenir le style CSS de l'élément, doit être écrite en casse chameau. Cependant, de nombreux amis novices qui connaissent CSS mais pas javascript feront toujours cette erreur de bas niveau. L'utilisation avancée de replace peut facilement remplacer le trait de soulignement dans l'attribut CSS par l'écriture de cas de chameau.

Copier le code Le code est le suivant :

var newProp = prop.replace( /-(w) /g, fonction( $, $1 ){
return $1.toUpperCase();
});

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 :

Copier le code Le code est le suivant :

var height = elem.style.height;

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 :

Copier le code Le code est le suivant :

var getStyle = function( elem, p ) {
var rPos = /^(left|right|top|bottom)$/,
ecma = "getComputedStyle" dans la fenêtre,
// Convertit le trait de soulignement en casse chameau tel que : padding-left = > paddingLeft
p = p.replace( /-(w)/g, function( $, $1 ){
return $1.toUpperCase();
});
// Processus flottant
p = p === "float" ? ( ecma ? "cssFloat" : "styleFloat" ) : p;

return !!elem.style[p]
elem.style[ p] :
ecma ?
function(){
var val = getComputedStyle( elem, null )(p];
// Gérer le cas où haut, droite, bas et gauche sont auto
if( rPos.test(p) && val === "auto" ){
return "0px";
}
return val;
}() :
function( ) {
var wirelesscasinogames.com val = elem.currentStyle[p];
// Récupère les éléments dans IE6/7/ 8 La largeur et la hauteur dans
if( (p === "width" || p === "height") && val === "auto" ){
var rect = elem.getBoundingClientRect() ;
return ( p === "width" ? rect.right - rect.left : rect.bottom - rect.top ) "px";
}
// Récupère les éléments dans IE6/7/ 8 Transparence dans
if( p === "opacity" ){
var filter = elem.currentStyle.filter;
if( /opacity/.test(filter) ){
val = filter .match( /d / )[0] / 100;
return (val === 1 || val === 0) ? val.toFixed(0) : val.toFixed(1);
}
else if( val === undefined ){
return "1";
}
}
// Gérer le cas où haut, droite, bas et gauche sont auto
if ( rPos.test(p) && val === "auto" ){
return "0px";
}
return val;
}();
};

Ce qui suit est un exemple d'appel :

Copier le code Le code est le suivant :

<script><BR>var box = document.getElementById( "box" );</script>

alert( getStyle(box, "width") ); // "500px"
alert( getStyle(box, "background-color") ); "#000"
alert( getStyle(box, "opacity") ); // "0.6"
alert( getStyle(box, "float") ); script>