如何从元素获取内联CSS样式属性 [英] How to get inline CSS style property from element

问题描述

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

我尝试过这样做：

  var inline_css = $（this）.attr（style）; 
  

但是......

它有效仅当元素没有内联样式之外的任何其他css属性时... ...：

  .our_element {something：some;} 
  

如何从元素中获取具有许多其他CSS属性的内联CSS属性？

解决方案

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

  var color = this.style.color; 
  

这将为您提供颜色 仅如果它在样式属性中（不通过样式表应用）。

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

为了完整起见，如果您需要信息是否来自样式属性或样式表，jQuery的CSS函数就是这样：

  var color = $（this）。 CSS（ 颜色）; 
  

---

来自您的评论：

谢谢，但是如果我想要所有属性我可以使用this.style ??

如果您希望所有内联样式作为文本，请获取样式属性（正如您所做）或使用 this.style.cssText 。

如果你想要所有的样式，无论它们是否内联，作为对象，在IE8等过时的浏览器上使用 getComputedStyle （或 currentStyle ）：

  var style = window.getComputedStyle？ getComputedStyle（this）：this.currentStyle; 
 if（style）{//在主要浏览器中都是如此
 var color = style.color; //或者无论是
} 
  

示例：

  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'）+（请注意，以像素为单位，可能不是pt））; snippet.log（$（div）.css（'color'）： + $（div）.css（'color'））;  

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

 < div class =foo style =font-size：12pt>这具有内联< code>字体大小：12pt< / code>和CSS（非内联）给出< code> font-size：14pt< / code>和< code> color：green< / code>。< / div>< hr>< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery。 min.js>< / script><！ - 脚本提供`snippet`对象，请参阅http://meta.stackexchange.com/a/242144/134069  - >< script src = http://tjcrowder.github.io/simple-snippets-console/snippet.js>< /脚本>  

I have problem with getting inline css style properties.

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:

.our_element {something: some;}

Any ideas how to get only inline CSS properties from element which has many other CSS properties?

解决方案

If you mean a style from the style attribute, you can access them directly on the element instance:

var color = this.style.color;

That will give you the color only if it's in the style attribute (not applied via stylesheet).

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"].

Just for completeness, if you want the information whether it comes from the style attribute or a stylesheet, jQuery's CSS function does just that:

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

---

From your comment:

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

If you want all of the inline-styles as text, either get the style attribute (as you're doing) or use this.style.cssText.

If you want all of the styles, regardless of whether they're inline or not, as an object, use getComputedStyle (or currentStyle on obsolete browsers like 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>

这篇关于如何从元素获取内联CSS样式属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！