Как прочитать встроенный стиль элемента?

Question

Я хотел бы знать, возможно ли определить, что встроенный стиль был приписан HTML-элементу.Мне не нужно извлекать значение, а скорее просто определить, было ли оно установлено встроенным или нет.

Например, если HTML был:

<div id="foo" style="width: 100px; height: 100px; background: green;"></div>

Как я могу это определить width, height, и background были явно объявлены, встроенные?

Насколько я могу судить, решение может работать двумя способами.Я могу спросить его, установлен ли определенный атрибут, и он скажет мне true или false, или он может сообщить мне все атрибуты, которые были установлены.Вот так:

var obj = document.getElementById('foo');
obj.hasInlineStyle('width');  //returns true;
obj.hasInlineStyle('border'); //returns false;

//or

obj.getInlineStyles();   //returns array with values:
                       // 'width' 'height' and 'background'

Меня не интересуют атрибуты css, которые наследуются через объявления в таблице стилей, только встроенные стили.И последнее: у меня нет контроля над исходным кодом HTML.

Спасибо

Answer 1

Обновлено для работы с IE

Вы могли бы попробовать что-то вроде этого

function hasInlineStyle(obj, style) {
    var attrs = obj.getAttribute('style');
    if(attrs === null) return false;
    if(typeof attrs == 'object') attrs = attrs.cssText;
    var styles = attrs.split(';');
    for(var x = 0; x < styles.length; x++) {
        var attr = styles[x].split(':')[0].replace(/^\s+|\s+$/g,"").toLowerCase();
        if(attr == style) {
            return true;
        }
    }
    return false;
}

Итак, если у вас есть такой элемент, как этот:

<span id='foo' style='color: #000; line-height:20px;'></span>

У этого также есть таблица стилей, подобная этой:

#foo { background-color: #fff; }

Функция вернет результат...

var foo = document.getElementById('foo');
alert(hasInlineStyle(foo,'color')); // true
alert(hasInlineStyle(foo,'background-color')); // false

Answer 2

Свойство style HTML-элемента возвращает объект style, в котором перечислены все свойства.Все, у которых есть значение (отличное от null или пустой строки), были установлены в атрибуте встроенного стиля.

Answer 3

Возможно, вы захотите попробовать сделать что-то вроде:

var obj = document.getElementById("foo");
var obj_has_background = (obj.style.background != "");
var obj_has_width = (obj.style.width != "");
var obj_has_height = (obj.style.height != "");

Кажется немного длинноватым, но это лучшее (и самое короткое) решение, которое я мог придумать.

Answer 4

Вы пытаетесь проверить, существует ли определенный атрибут стиля, или просто хотите получить список возможных атрибутов?Если вы уже знаете атрибут, то вы можете просто использовать

hasStyle(obj,'width');
function hasStyle(obj, style)
{
     switch(style)
         case 'width':
              return obj.style.width ? true : false;
         case 'background':
              return obj.style.background ? true : false;
}

Вы можете использовать функцию Paolo для генерации массива стилей.