Как получить встроенное свойство стиля 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, или вы можете также использовать стилизованный стиль CSS с использованием скобок нотации, this.style["font-size"].

Просто для полноты картины, если вы хотите получить информацию, идет ли он из style атрибута или таблицу стилей, функция CSS JQuery в делает только что:

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 
} 

Примеры :

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>