En plus de la définition de style en ligne (c'est-à-dire ajoutée via l'attribut style), le style CSS d'un élément dispose également de deux méthodes : css intégré dans la page et css introduit en externe. Cependant, dans JS, seuls les attributs de style en ligne peuvent être obtenus via el.style.xxx, ce qui présente des limitations relativement importantes. Heureusement, les navigateurs offrent d'autres moyens d'obtenir des attributs de style définis d'une autre manière. Dans IE, il existe currentStyle, FF et d'autres navigateurs standard du w3c tels que getComputedStyle.
Pour faciliter l'utilisation, de nombreuses bibliothèques js actuelles l'ont encapsulé, mais souvent, nous n'avons pas besoin d'introduire de bibliothèque. Tout ce dont nous avons besoin est une fonction getStyle pour obtenir la définition de style actuelle de l'élément. Après avoir fait référence à plusieurs codes JS-Lib, j'ai décidé d'implémenter une version simplifiée de la fonction getStyle. L'objectif de cette fonction est de répondre à la plupart des besoins, d'être multi-navigateurs, d'avoir un code concis et d'avoir d'excellentes performances. Sur la base de ces exigences, il m'a fallu une heure pour le faire. J'ai principalement utilisé plusieurs astuces telles que "les caractéristiques de l'opérateur logique JS, la "compilation" de code et l'exécution instantanée des fonctions. Je l'ai écrit ici pour une utilisation future. , si c'est le cas. peut être utile à n'importe quel ami, bien sûr, ce serait mieux.
code de programme
var getStyle=fonction(){
var f=document.defaultView;
retourner une nouvelle fonction('el','style',[
"style.indexOf('-')>-1 && (style=style.replace(/-( \w)/g,function(m,a){return a.toUpperCase()}));",
"style=='float' && (style='",
f ? 'cssFloat' : 'styleFloat',
"');retourner el.style[style] || ",
f ? 'window.getComputedStyle(el, null)[style]' : 'el.currentStyle[style]',
' || null;'].join(''));
}();
//Exemple d'utilisation :
var el=document.getElementById('test');
getStyle(el,'hauteur de ligne');
getStyle(el,'couleur');
getStyle(el,'float');
Depuis : http://www.ajaxbbs.net/post/webFront/JS-Get-Style-Function.html