如何从元素获取内联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 ，则会为您提供 <（仅通过样式表应用）。

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

为了完整起见，如果您想要了解来自style属性或样式表的信息，那么jQuery的CSS功能就是这样：

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

来自你的评论：

  

谢谢，但如果我想要所有属性，我可以使用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
}

<强>实施例：

＆＃13;

＆＃13;

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'));

＆＃13;

.foo {
  font-size: 14pt;
  color: green;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

就像这样古老，实际的问题是要在给定元素上获取所有计算的样式。

您实际上想使用它的Window.getComputedStyle()方法。

回到browser support的位置，比原来的问题还要远。

示例：

var ourElement = document.querySelector(".ourElement");
var ourElementStyles = window.getComputedStyle(ourElement);

ourElement.textContent += ourElementStyles.color;

.ourElement {
  color: rgb(0, 255, 0) !important;
}

<div class="ourElement" style="color:rgb(255,0,0)">color: </div>