jquery - 如何从元素中获取内联 CSS 样式属性

Question

我在获取内联 css 样式属性时遇到问题。

我试过这样做:

 var inline_css = $(this).attr("style");

但是……

它仅在元素没有内联样式之外的任何其他 css 属性时才有效...例如:

.our_element {something: some;}

关于如何从具有许多其他 CSS 属性的元素中仅获取内联 CSS 属性有什么想法吗？

Answer 1

如果您指的是 style 属性中的样式，您可以直接在元素实例上访问它们:

var color = this.style.color;

这将为您提供 color 只有 如果它在 style 属性中(不通过样式表应用)。

如果您使用文字表示法，则您使用的名称是驼峰命名法，例如this.style.fontSize，或者您也可以使用括号符号的 CSS 虚线样式，this.style["font-size"]。

为了完整起见，如果您想要信息是来自style 属性还是样式表，jQuery 的CSS 函数就是这样做的:

var color = $(this).css("color");

---

来自您的评论:

thanks, but if I want all properties can I use this.style ??

如果您想要所有 内联样式作为文本，请获取style 属性(如您所愿)或使用this.style。 cssText.

如果你想要所有的样式，不管它们是否内联，作为一个对象，使用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
}

示例:

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>