JavaScript erhalten Stile

Question

Ist es möglich, alle Stile für ein Objekt mit JavaScript zu erhalten? Etwas wie:

 

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

Sie sprechen über das, was als Computed Stil bekannt ist, sehen Sie sich diese Artikel auf, wie es zu bekommen:

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

F den letzten Artikel Rom, hier ist eine Funktion:

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; 
} 

Wie man es verwendet:

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

Sie könnten verwenden:

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

Jede CSS-Eigenschaft hat ihr eigenes Objektmodell. Normalerweise werden diese css-Eigenschaften, die '-' enthalten, mit dem Java-Modell geschrieben.

Zum Beispiel:

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

Wenn Sie alle CSS-Eigenschaften zu bekommen, die für ein Objekt definiert sind, müssen Sie sie nach dem anderen, eine aufzulisten, denn selbst wenn Sie nicht die Eigenschaft, in gesetzt haben Ihr Stylesheet, ein Objekt wird es mit dem Standardwert haben.

Answer 3

Polyfill den aktuellen CSS-Stil-Element erhalten mit Hilfe von Javascript ... Besuchen Sie die link für weitere Informationen

/** 
* @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