javascript 如何仅通过提供元素的 id 来获取元素的所有应用样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9430659/
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
How to get all the applied styles of an element by just giving its id?
提问by manishekhawat
I was trying to write a function which takes the Id of an element and gives the list of all the style attributes(with their values) applied on that element. It should consider the inline style as well as the style defined in css file.
我试图编写一个函数，它接受元素的 Id 并给出应用于该元素的所有样式属性（及其值）的列表。它应该考虑内联样式以及 css 文件中定义的样式。
I could get the function work when I provide style attribute name along with the id of the element in parameter but I just want to pass the id of the element and should be able to get all the style attributes along with values.
当我在参数中提供样式属性名称和元素的 id 时，我可以使函数工作，但我只想传递元素的 id，并且应该能够获取所有样式属性和值。
function should be something like getStyleById(elementId);
函数应该类似于 getStyleById(elementId);
PFB the code snippet so far:
PFB 到目前为止的代码片段：
var styleNode = [];
var styles;
var sty = x.style;
var len = sty.length;
for (var i = 0; i < len; i++) {
styles = sty.item(i);
if (x.currentStyle) //IE for External/Global Styles
{
var a = x.currentStyle[styles];
styleNode.push(styles + ":" + a);
}
else if (document.defaultView && document.defaultView.getComputedStyle) //Firefox,Chrome,Safari for External/Global Styles
{
var b = document.defaultView.getComputedStyle(x, "").getPropertyValue(styles);
styleNode.push(styles + ":" + b);
}
else //Works in Inline Styles only
{
var c = x.style[styles];
styleNode.push(styles + ":" + c);
}
}
Any help would be appreciated.
任何帮助，将不胜感激。
Regards,
问候，
manishekhawat
马尼什卡瓦
回答by Rob W
Use the following method:
使用以下方法：
- Loop through the indexes of the
CSSStyleDeclarationobject (getComputedStyle) to get each known property name. UsegetPropertyValue+ this name to get the value.
Code optimalization: Do not usegetComputedStylefor each iteration, but store it in a variable outside the loop. - Use an ordinary
for ( name in object )loop forcurrentStyle. - Use the same looping method for inline styles
- 遍历
CSSStyleDeclaration对象的索引( getComputedStyle) 以获取每个已知的属性名称。使用getPropertyValue+ 这个名称来获取值。
代码优化：不getComputedStyle用于每次迭代，而是将其存储在循环外的变量中。 - 使用普通
for ( name in object )循环 forcurrentStyle。 - 对内联样式使用相同的循环方法
Code:
代码：
function getStyleById(id) {
return getAllStyles(document.getElementById(id));
}
function getAllStyles(elem) {
if (!elem) return []; // Element does not exist, empty list.
var win = document.defaultView || window, style, styleNode = [];
if (win.getComputedStyle) { /* Modern browsers */
style = win.getComputedStyle(elem, '');
for (var i=0; i<style.length; i++) {
styleNode.push( style[i] + ':' + style.getPropertyValue(style[i]) );
// ^name ^ ^ value ^
}
} else if (elem.currentStyle) { /* IE */
style = elem.currentStyle;
for (var name in style) {
styleNode.push( name + ':' + style[name] );
}
} else { /* Ancient browser..*/
style = elem.style;
for (var i=0; i<style.length; i++) {
styleNode.push( style[i] + ':' + style[style[i]] );
}
}
return styleNode;
}
