JavaScript crée des styles

Est-il possible d'obtenir TOUS les styles d'un objet en utilisant JavaScript? Quelque chose comme:

main.css ------- #myLayer { position: absolute; width: 200px; height: 100px; color: #0000ff; } main.js ------- var ob = document.getElementById("myLayer"); var pos = ob.(getPosition); // Pos should equal "absolute" but // ob.style.position would equal null // any way to get absolute? 

Vous parlez de ce que l'on appelle le style calculé , consultez cet article sur la façon de l'obtenir:

  • Obtenir des styles sur QuirksMode
  • Obtenir un style calculé
  • Obtenir le style rendu d'un élément

Du dernier article, voici une fonction:

 function getStyle(oElm, strCssRule){ var strValue = ""; if(document.defaultView && document.defaultView.getComputedStyle){ strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule); } else if(oElm.currentStyle){ strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){ return p1.toUpperCase(); }); strValue = oElm.currentStyle[strCssRule]; } return strValue; } 

Comment l'utiliser:

CSS:

 /* Element CSS*/ div#container{ font: 2em/2.25em Verdana, Geneva, Arial, Helvetica, sans-serif; } 

JS:

 var elementFontSize = getStyle(document.getElementById("container"), "font-size"); 

Polyfill pour obtenir le style d'élément CSS actuel en utilisant javascript … Visitez le lien pour plus d'informations

 /** * @desc : polyfill for getting the current CSS style of the element * @param : elem - The Element for which to get the computed style. * @param : prop - The Property for which to get the value * @returns : The returned style value of the element **/ var getCurrentStyle = function (ele, prop) { var currStyle; if (!window.getComputedStyle) { currStyle = ele.currentStyle[prop]; } else { currStyle = window.getComputedStyle(ele).getPropertyValue(prop); } return currStyle; } /** How to use **/ var element = document.getElementById("myElement"); getCurrentStyle(element, "width"); // returns the width value 

Vous pourriez utiliser:

 var ob = document.getElementById("myLayer"); var pos = ob.style.position; 

Chaque propriété CSS a son propre modèle d'objet. Généralement, ces propriétés css qui contiennent '-' sont écrites en utilisant un modèle java.

Par exemple:

 //getting background-color property var ob = document.getElementById("myLayer"); var color = ob.style.backgroundColor; 

Si vous souhaitez obtenir toutes les propriétés css définies pour un objet, vous devrez les énumérer un par un, car même si vous n'avez pas configuré la propriété dans votre feuille de style, un objet l'aura avec la valeur par défaut.