通过外部 CSS 文件应用时如何访问 javascript 中的 css 属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4057270/
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 access css properties in javascript when applied via external CSS file?
提问by Rahul Utb
I have a little problem.
When I set the css rule using some property, say, background-image in an external .css file and then try to access it using javascript in another external .js file, it does not work. That is to say I do not get any value for document.getElementById(someId).style.backgroundImage.
我有一个小问题。当我使用某些属性设置 css 规则时，例如，外部 .css 文件中的背景图像，然后尝试使用另一个外部 .js 文件中的 javascript 访问它时，它不起作用。也就是说我没有得到任何价值document.getElementById(someId).style.backgroundImage.
But when I set the css rule using style attribute in html file itself, it works.
但是当我在 html 文件本身中使用 style 属性设置 css 规则时，它可以工作。
So, my query is can't I access css property in js, if css is set in external .css file.
因此，如果 css 是在外部 .css 文件中设置的，我的查询是无法访问 js 中的 css 属性。
回答by gblazex
You can only access style properties in Javascript that have been set via Javascript (or the styleattr).
您只能访问已通过 Javascript（或styleattr）设置的 Javascript 中的样式属性。
To access the elements current style you should fetch the computed styleof the element.
要访问元素当前样式，您应该获取computed style元素的 。
var el = document.getElementById('hello');
var comp = el.currentStyle || getComputedStyle(el, null);
alert( comp.backgroundColor );
Note, that the computed style may varyin browsers (like color being in hex or rgb) so you should normalizethat if you want unified results.
请注意，计算的样式可能因浏览器而异（例如颜色为十六进制或 rgb），因此如果您想要统一的结果，您应该对其进行标准化。
回答by kennebec
If you are trying to access a css property set in a stylesheet, rather than an inline style property, use document.defaultView.getComputedStyle (anything but IE below 9) or element.currentStyle in older IE's.
如果您尝试访问在样式表中设置的 css 属性，而不是内联样式属性，请在旧版 IE 中使用 document.defaultView.getComputedStyle（除 IE 低于 9 的任何内容）或 element.currentStyle。
eg:
例如：
function deepCss (who, css){
var dv, sty, val;
if(who && who.style){
css= css.toLowerCase();
sty= css.replace(/\-([a-z])/g, function(a, b){
return b.toUpperCase();
});
val= who.style[sty];
if(!val){
dv= document.defaultView || window;
if(dv.getComputedStyle){
val= dv.getComputedStyle(who,'').getPropertyValue(css);
}
else if(who.currentStyle){
val= who.currentStyle[sty];
}
}
}
return val || '';
}
deepCss(document.body,'font-size')
deepCss(document.body,'font-size')
回答by mway
Are you trying to retrieve the property before it's actually rendered/the DOM is ready? Try doing it in the body's onloadevent, or if you're using jQuery, $(document).ready().
您是否试图在实际呈现之前检索该属性/DOM 准备就绪？尝试在身体的做onload活动，或者如果你使用jQuery $(document).ready()。
回答by Ankur Chauhan
You could use jquery to edit. Refer to http://api.jquery.com/css/
您可以使用 jquery 进行编辑。参考http://api.jquery.com/css/
回答by Marin
the styleproperty can be used to set styles and to retrieve inline style values, but it cannot retrieve style values set in an external style sheet.
的风格属性可以用来设置的风格和检索内嵌样式值，但不能检索外部样式表设置样式值。
someElement = document.getElementById("element");
myStyles = document.defaultView.getComputedStyle(someElement,null);
backgroundImage = myStyles.getPropertyValue("background-image"); // w3c
backgroundImage = someElement.currentStyle["background-image"]; //IE
