jQuery 如何从元素获取内联 CSS 样式属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32904820/
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 inline CSS style property from element
提问by luke9999
I have problem with getting inline css style properties.
我在获取内联 css 样式属性时遇到问题。
I'd tried doing that with:
我试过这样做：
var inline_css = $(this).attr("style");
but...
但...
it works only when element does not have any other css properties outside inline style... like:
它仅在元素没有内联样式之外的任何其他 css 属性时才有效......例如：
.our_element {something: some;}
Any ideas how to get only inline CSS properties from element which has many other CSS properties?
任何想法如何从具有许多其他 CSS 属性的元素中仅获取内联 CSS 属性？
回答by T.J. Crowder
If you mean a style from the styleattribute, you can access them directly on the element instance:
如果您指的是来自style属性的样式，则可以直接在元素实例上访问它们：
var color = this.style.color;
That will give you the coloronlyif it's in the styleattribute (not applied via stylesheet).
这将让你color只当它在style属性（通过样式表不适用）。
The names you use are camelCase if you use literal notation, e.g. this.style.fontSize, or you can also use the CSS dashed style using brackets notation, this.style["font-size"].
如果您使用文字符号，则使用的名称是驼峰式命名，例如this.style.fontSize，或者您也可以使用使用括号符号的 CSS 虚线样式，this.style["font-size"]。
Just for completeness, if you want the information whether it comes from the styleattribute ora stylesheet, jQuery's CSS function does just that:
为了完整起见，如果您想要信息是来自style属性还是样式表，jQuery 的 CSS 函数就是这样做的：
var color = $(this).css("color");
From your comment:
从你的评论：
thanks, but if I want all properties can I use this.style ??
谢谢，但如果我想要所有属性，我可以使用 this.style 吗？？
If you want allof the inline-styles as text, either get the styleattribute (as you're doing) or use this.style.cssText.
如果您希望所有内联样式都作为文本，请获取style属性（正如您所做的那样）或使用this.style.cssText.
If you want allof the styles, regardless of whether they're inline or not, as an object, use getComputedStyle(or currentStyleon obsolete browsers like IE8):
如果您想要所有样式，无论它们是否内联，作为对象，请使用getComputedStyle（或currentStyle在 IE8 等过时浏览器上）：
var style = window.getComputedStyle ? getComputedStyle(this) : this.currentStyle;
if (style) { // This will be true on major browsers
var color = style.color; // Or whatever
}
Examples:
例子：
var div = document.querySelector(".foo");
snippet.log("div.style.fontSize: " + div.style.fontSize);
snippet.log("div.style.color: " + div.style.color);
snippet.log("div.style.cssText: " + div.style.cssText);
snippet.log("$(div).attr('style'): " + $(div).attr('style'));
snippet.log("$(div).css('fontSize'): " + $(div).css('fontSize') + " (note that's in pixels, probably, not pt)");
snippet.log("$(div).css('color'): " + $(div).css('color'));.foo {
font-size: 14pt;
color: green;
}<div class="foo" style="font-size: 12pt">
This has an inline <code>font-size: 12pt</code> and
CSS (not inline) giving <code>font-size: 14pt</code> and <code>color: green</code>.
</div>
<hr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>