PS: C'est pour obtenir le style, pas pour définir le style. Si aucune valeur de style n'est définie pour l'élément, la valeur par défaut donnée par le navigateur est renvoyée. (Forum trié)
1. Element.Style: seule la valeur de style écrite dans l'attribut de style dans la balise d'élément ne peut pas être obtenue. L'attribut de style défini dans <style> </pyle> et chargé via <link href = "css.css"> ne peut pas être obtenu.
La copie de code est la suivante:
var ele = document.getElementById ('ele');
ele.style.color; // Obtenez de la couleur
2. Window.getCompuledStyle (): il peut obtenir toutes les valeurs d'attribut CSS finales de l'élément actuel.
La copie de code est la suivante: window.getCompuledStyle ("élément", "pseudo-classe");
Cette méthode accepte deux paramètres: pour obtenir l'élément du style calculé et une chaîne pseudo-élémentaire (par exemple ": avant"). Si des informations pseudo-éléments ne sont pas requises, le deuxième paramètre peut être nul. Il peut également être utilisé via document.defaultView.getCompuledStyle ("élément", "pseudo-classe");
La copie de code est la suivante:
var ele = document.getElementById ('ele');
var styles = window.getCompuledStyle (ele, null);
Styles.Color; // Obtenez de la couleur
Vous pouvez utiliser Style.Length pour afficher le nombre de styles par défaut du navigateur. IE6-8 ne prend pas en charge cette méthode et la méthode suivante doit être utilisée. Pour Firefox et Safari, la couleur sera convertie au format RVB.
3. élément.currentStyle: spécial pour IE, il renvoie la valeur d'attribut CSS finale de l'élément actuellement appliqué (y compris le fichier CSS de liaison externe, l'attribut <style> intégré dans la page, etc.).
La copie de code est la suivante:
var ele = document.getElementById ('ele');
var styles = ele.currentStyle;
Styles.Color;
Remarque: Pour une frontière d'attribut complète, etc., c'est-à-dire des renvoie non définis. Certains autres navigateurs renvoient les valeurs et d'autres ne reviennent pas, mais les attributs comme BorderLeftWidth Return Values.
4. GetPropertyValue (): Obtenez le nom de la propriété directe du style CSS
La copie de code est la suivante:
var ele = document.getElementById ('ele');
window.getCompuledStyle (ele, null) .getPropertyValue ('Color');
Remarque: Le nom d'attribut ne prend pas en charge le format de chameau, IE6-8 ne prend pas en charge cette méthode, donc la méthode suivante est requise
5. getAtTribute (): Similaire à GetPropertyValue, une différence est le format de chameau du nom de la propriété
La copie de code est la suivante:
var test = document.getElementById ('test');
window.getCompuledStyle (test, null) .getPropertyValue ("backgroundColor");
Remarque: cette méthode ne prend en charge que IE6-8.
La méthode d'obtention du style suivant est compatible avec IE, Chrome, Firefox, etc.
La copie de code est la suivante:
fonction getStyle (ele) {
var style = null;
if (window.getCompuledStyle) {
style = window.getCompuledStyle (ele, null);
}autre{
style = ele.currentStyle;
}
style de retour;
}
Dans jQuery, CSS () est couramment utilisé pour obtenir des propriétés de style, et son opération sous-jacente applique les méthodes GetComputedStyle et GetPropertyValue.