JavaScript get Styles

Question

Czy można uzyskać WSZYSTKIE style dla obiektu za pomocą JavaScript? Coś jak:

 

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

Mówisz o tym, co jest znane jako komputerowej Style, sprawdź te artykuł o tym, jak je zdobyć:

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

F ROM ostatni artykuł, tutaj jest funkcją:

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

Jak go używać:

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

Można użyć:

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

Każda własność CSS ma swój własny model obiektu. Zazwyczaj te właściwości css, które zawierają "-", są zapisywane przy użyciu modelu java.

Na przykład:

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

Jeśli chcesz uzyskać wszystkie właściwości CSS, które są zdefiniowane dla obiektu, trzeba będzie wymienić je jeden po drugim, bo nawet jeśli nie ustawić właściwość w w arkuszu stylów obiekt będzie miał domyślną wartość.

Answer 3

PolyFill aby uzyskać aktualny styl CSS elementu za pomocą javascript ... Odwiedź link uzyskać więcej informacji

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