JavaScript 获取样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4172871/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript get Styles
提问by NoodleOfDeath
Is it possible to get ALL of the styles for an object using JavaScript? Something like:
是否可以使用 JavaScript 获取对象的所有样式？就像是：
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?
回答by Sarfraz
You are talking about what is known as Computed Style, check out these article on how to get it:
您正在谈论所谓的Computed Style，请查看以下有关如何获取它的文章：
From the last article, here is a function:
在上一篇文章中，这里有一个函数：
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;
}
How to use it:
如何使用它：
CSS:
CSS：
/* Element CSS*/
div#container{
font: 2em/2.25em Verdana, Geneva, Arial, Helvetica, sans-serif;
}
JS:
JS：
var elementFontSize = getStyle(document.getElementById("container"), "font-size");
回答by Ajain Vivek
Polyfill to get the current CSS style of element using javascript ... Visit the linkfor more info
Polyfill 使用 javascript 获取元素的当前 CSS 样式...访问链接了解更多信息
/**
* @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
回答by Silver Light
You might use:
你可能会使用：
var ob = document.getElementById("myLayer");
var pos = ob.style.position;
Every CSS property has it's own object model. Usually those css properties that contain '-' are written using java model.
每个 CSS 属性都有自己的对象模型。通常那些包含“-”的 css 属性是使用 java 模型编写的。
For example:
例如：
//getting background-color property
var ob = document.getElementById("myLayer");
var color = ob.style.backgroundColor;
If you want to get all the css properties that are defined for an object, you will have to list them one by one, because even if you did not set the property in your style sheet, an object will have it with the default value.
如果您想获取为对象定义的所有 css 属性，则必须将它们一一列出，因为即使您没有在样式表中设置该属性，对象也会使用默认值。
