Как читать встроенные стили элемента? - PullRequest
Новая
       31

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

1 голос
/ 25 января 2009

Я хотел бы знать, возможно ли определить, какой встроенный стиль был приписан элементу 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.

Спасибо

Ответы [ 4 ]

3 голосов
/ 25 января 2009

Обновлено для работы с 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
1 голос
/ 25 января 2009

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

0 голосов
/ 25 января 2009

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

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

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

0 голосов
/ 25 января 2009

Вы можете попробовать сделать что-то вроде: 

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 != "");

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

...