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

我有获取内联css样式属性的问题。

我试过这样做：

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

但…

它仅适用于元素在内联样式之外没有任何其他css属性的情况…如：

 .our_element {something: some;} 

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

Answer 1

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

 var color = this.style.color; 

只有在style属性中（不通过样式表应用）时，它才会为您提供color 。

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

只是为了完整性，如果你想要它来自style属性或样式表的信息，jQuery的CSS函数就是这样：

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

---

从你的评论：

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

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

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

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

 
 This has an inline font-size: 12pt and CSS (not inline) giving font-size: 14pt and color: green.