JavaScript get Styles

Question

Est-il possible d'obtenir TOUS les styles pour 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? 

 

Answer 1

Vous parlez de ce qu'on appelle Computed style, consultez ces article sur la façon de l'obtenir:

• Get Styles on QuirksMode
• Get Computed Style
• Get the rendered style of an element

F epuis le 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"); 

Answer 2

Vous pouvez utiliser:

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

Chaque propriété CSS possède son propre modèle d'objet. Habituellement, les propriétés css qui contiennent '-' sont écrites en utilisant le 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 qui sont définies pour un objet, vous devrez les énumérer un par un, parce que même si vous n'avez pas défini la propriété votre feuille de style, un objet l'aura avec la valeur par défaut.

Answer 3

Polyfill pour obtenir le style actuel CSS de l'élément en utilisant javascript ... Visitez le link 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