Как получить значения стиля HTML-элемента в javascript?

Я ищу способ получить стиль из элемента, который имеет стиль, установленный на нем тегом style.

<style> 
#box {width: 100px;}
</style>

В теле 

<div id="box"></div>

Я ищу прямой javascript без использования библиотек.

Я попробовал следующее, но продолжаю получать пробелы: 

alert (document.getElementById("box").style.width);  
alert (document.getElementById("box").style.getPropertyValue("width"));

Я заметил, что я могу использовать только то, что выше, если я установил стиль с помощью javascript, но не могу с тегами стилей.

4 43
javascript html css stylesheet

4 ответа:

element.style свойство позволяет узнать только свойства CSS, которые были определены как inline в этом элементе (программно или определены в атрибуте style элемента), вы должны получить вычисляемый стиль.

Не так просто сделать это кроссбраузерным способом, т. е. имеет свой собственный путь, через свойство element.currentStyle, а DOM Level 2 стандартный способ, реализованный другими браузерами, - через свойство

.document.defaultView.getComputedStyle метод.

Эти двое способы имеют отличия, например, в IE element.currentStyle свойство предполагается, что вы получаете доступ к именам свойств CCS, состоящим из двух или более слов в camelCase (например maxHeight, fontSize, backgroundColor, и т. д.), стандартный способ ожидает свойства со словами, разделенными тире (например,max-height, font-size, background-color, и т.д.).

Кроме того, IE element.currentStyle вернет все размеры в единице, которые они были указаны (например, 12pt, 50%, 5em), стандартный способ вычислит фактический размер в пикселях всегда.

Некоторое время назад я создал кроссбраузерную функцию, которая позволяет получать вычисляемые стили кроссбраузерным способом: 

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // W3C standard way:
  if (defaultView && defaultView.getComputedStyle) {
    // sanitize property name to css notation
    // (hypen separated words eg. font-Size)
    styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  } else if (el.currentStyle) { // IE
    // sanitize property name to camelCase
    styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });
    value = el.currentStyle[styleProp];
    // convert other units to pixels on IE
    if (/^\d+(em|pt|%|ex)?$/i.test(value)) { 
      return (function(value) {
        var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
        el.runtimeStyle.left = el.currentStyle.left;
        el.style.left = value || 0;
        value = el.style.pixelLeft + "px";
        el.style.left = oldLeft;
        el.runtimeStyle.left = oldRsLeft;
        return value;
      })(value);
    }
    return value;
  }
}

Приведенная выше функция не идеальна для некоторых случаев, например для цветов, стандартный метод вернет цвета в rgb(...) обозначения, на IE они вернут их, как они были определены.

В настоящее время я работаю над статьей в этой теме, вы можете следить за изменениями, которые я делаю в этой функции здесь.

68

В jQuery, Вы можете сделать alert($("#theid").css("width")).

- Если вы еще не взглянули на jQuery, я настоятельно рекомендую его; он делает многие простые задачи javascript легкими.

Обновление

Для справки, этому посту уже 5 лет. Паутина развивалась,двигалась дальше и т.д. Есть способы сделать это с помощью обычного старого Javascript, что лучше.
8

Я полагаю, что теперь вы можете использовать окно.getComputedStyle()

Документация MDN

var style = window.getComputedStyle(element[, pseudoElt]);

Пример получения ширины элемента: 

window.getComputedStyle(document.querySelector('#mainbar')).width
6

С помощью .css () в jquery тег style может быть доступен и изменен

Например: 

var color = $( this ).css( "background-color" );
  $( "#result" ).html( "That div is <span style='color:" +
    color + ";'>" + color + "</span>." );
0