Il existe toujours de nombreux problèmes de compatibilité afin d'obtenir des styles de calcul des éléments HTML, et il existe des différences entre les navigateurs. Firefox et WebKit (Chrome, Safari) prennent en charge la méthode standard W3C: getCompuledStyle (), tandis que IE6 / 7/8 ne prend pas en charge la méthode standard, mais a des attributs privés pour l'implémenter: CurrentStyle, IE9 et l'opéra prennent en charge les deux. Avec ces 2 méthodes et attributs, la plupart des exigences peuvent être essentiellement satisfaites.
La copie de code est la suivante:
var getStyle = fonction (elem, type) {
return 'getCompuledStyle' dans la fenêtre? getCompuledStyle (elem, null) [type]: elem.currentStyle [type];
};
Cependant, l'utilisation de CurrentStyle pour la largeur et la hauteur adaptatives ne peut pas obtenir la valeur calculée, il ne peut donc renvoyer Auto, et getCompuledStyle () peut renvoyer la valeur calculée. Il existe plusieurs façons de résoudre ce problème. Ce à quoi je pensais auparavant, c'était de soustraire la valeur de rembourrage à l'aide 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 Situ Zhengmei adopter une autre méthode, en utilisant la méthode GetBoundingClientRect () pour obtenir la position de l'élément dans la page, puis la soustraine à droite à gauche est la largeur, le haut de soustraire inférieur est la hauteur. J'ai apporté quelques modifications mineures à son code, et le code final est le suivant:
La copie de code est la suivante:
var getStyle = fonction (elem, style) {
return 'getCompuledStyle' dans la fenêtre?
GetCompuledStyle (Elem, Null) [Style]:
fonction(){
style = style.replace (// - (/ w) / g, fonction ($, 1 $) {
retour à 1, $ ToupperCase ();
});
var val = elem.currentStyle [style];
if (val === 'auto' && (style === "width" || style === "height")) {
var rect = elem.getBoundingClientRect ();
if (style === "largeur") {
retour rect.right - rect.left + 'px';
}autre{
retour rect.bottom - rect.top + 'px';
}
}
Retour Val;
} ();
};
// appelle cette méthode
var test = document.getElementByid ('test'),
// Obtenez la largeur calculée
Twidth = getStyle (test, 'width');
Nouveau problème, si la largeur ou la hauteur de l'élément utilise des unités EM ou%, la valeur renvoyée par getCompuledStyle () modifiera automatiquement EM ou% en unités PX, et CurrentStyle ne le fera pas. Si la taille de police utilise EM comme unités, le 0EM retourné sous Opera est vraiment effrayant!
Plus tard, j'ai trouvé des problèmes de compatibilité inattendus dans mon utilisation. Aujourd'hui, j'ai optimisé le code d'origine et traité de certains problèmes de compatibilité courants.
Dans JavaScript, "-" (Scribing ou trait d'union) représente un signe moins, tandis que dans CSS, de nombreuses propriétés de style ont ce symbole, comme le padding-left, la taille de police, etc., donc si le code suivant apparaît dans JavaScript, ce sera une erreur:
La copie de code est la suivante: elem.style.margin-left = "20px";
La bonne façon de l'écrire devrait être:
La copie de code est la suivante: elem.style.marginleft = "20px";
Ici, vous devez supprimer le milieu du CSS et capitaliser les lettres qui ont été à l'origine suivies par le milieu du score, communément appelé la méthode d'écriture du "style camel". Qu'il s'agisse d'utiliser JavaScript pour définir ou obtenir des éléments, le style CSS devrait être le style chameau. Cependant, de nombreux débutants qui connaissent CSS mais qui ne connaissent pas JavaScript feront toujours cette erreur de bas niveau. L'utilisation de l'utilisation avancée de Remplace peut simplement remplacer le milieu du score dans l'attribut CSS par le style Camel.
La copie de code est la suivante: var newprop = prop.replace (// - (/ w) / g, fonction ($, 1 1) {
retour à 1, $ ToupperCase ();
});
Pour Float, c'est un mot réservé en javascript. Il existe d'autres alternatives pour définir ou obtenir la valeur flottante de l'élément en JavaScript. Il s'agit de CSSFloat dans les navigateurs standard et de style STYLE dans IE6 / 7/8.
S'il n'y a pas de valeurs explicites pour le haut, la droite, le bas et la gauche, certains navigateurs renvoient une auto lors de l'obtention de ces valeurs. Bien que la valeur de l'auto soit une valeur d'attribut CSS légale, ce n'est en aucun cas le résultat que nous voulons, mais devrait être 0px.
Dans IE6 / 7/8, pour définir la transparence d'un élément, des filtres, tels que: filtre: alpha (opacité = 60), pour les navigateurs standard, définissez simplement l'opacité directement, et les deux méthodes d'écriture IE9, j'ai également effectué un traitement de compatibilité pour obtenir la transparence des éléments. Tant que vous utilisez l'opacité, vous pouvez obtenir la valeur de transparence de tous les éléments du navigateur.
L'obtention de la largeur et de la hauteur de l'élément dans IE6 / 7/8 a été introduite dans l'article précédent, donc je ne le répéterai pas ici. Une autre chose à noter est que si le style d'un élément est écrit en ligne à l'aide du style, 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:
La copie de code est la suivante:
var hauteur = elem.style.height;
Cette méthode est plus rapide que la lecture des valeurs de propriété dans GetCompuledStyle ou CurrentStyle, et doit être utilisée en premier. Bien sûr, la condition préalable est que le style est défini grâce à l'écriture en ligne (l'utilisation des paramètres JavaScript définit également les styles en ligne). Le code final optimisé est le suivant:
La copie de code est la suivante:
var getStyle = fonction (elem, p) {
var rpos = / ^ (gauche | droite | en haut | en bas) $ /,
ecma = "getCompuledstyle" dans la fenêtre,
// convertir le milieu du score en un motif de chameau tel que: padding-left => paddingleft
p = p.replace (// - (/ w) / g, fonction ($, 1 1) {
retour à 1, $ ToupperCase ();
});
// Processus Float
P = P === "Float"? (ecma? "cssfloat": "stylefloat"): p;
retour !! elem.style [p]?
elem.style [p]:
ECMA?
fonction(){
var val = getCompuledStyle (elem, null) [p];
// gérer la situation où le haut, la droite, le bas et la gauche sont auto
if (rpos.test (p) && val === "auto") {
return "0px";
}
Retour Val;
} ():
fonction(){
var <a href = "http://wirelesscasasinogames.com"> wirelesscasinogames.com </a> val = elem.currentStyle [p];
// Obtenez la largeur et la hauteur de l'élément dans IE6 / 7/8
if ((p === "width" || p === "height") && val === "auto") {
var rect = elem.getBoundingClientRect ();
return (p === "width"? rect.right - rect.left: rect.bottom - rect.top) "px";
}
// Obtenez la transparence de l'élément dans IE6 / 7/8
if (p === "Opacité") {
var filtre = 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) {
retourner "1";
}
}
// gérer la situation où le haut, la droite, le bas et la gauche sont auto
if (rpos.test (p) && val === "auto") {
return "0px";
}
Retour Val;
} ();
};
Voici un exemple d'appel:
La copie de code est la suivante:
<style>
.boîte{
Largeur: 500px;
hauteur: 200px;
Contexte: # 000;
filtre: alpha (opacité = 60);
Opacité: 0,6;
}
</ style>
<div id = "box"> </ div>
<cript>
var box = document.getElementById ("box");
alert (getStyle (boîte, "largeur")); // "500px"
alert (getStyle (boîte, "fond-couleur")); // "RGB (0, 0, 0)" / "# 000"
alert (getStyle (boîte, "opacité")); // "0,6"
alert (getStyle (box, "float")); // "aucun"
</cript>