В теле

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

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

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

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

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

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

позволяет вам знать только свойства CSS, которые были определены как

Переменная element.style в этом элементе (программно или определены в атрибуте style элемента), вы должны получить свойство inline и DOM Level 2 { *} Способ, реализованный другими браузерами, — через метод компьютерный стиль Глядя на вывод

Это не так просто сделать кросс-браузерным способом, у IE есть свой путь, через element.currentStyle. стандарт Два способа имеют различия, например, свойство IE document.defaultView.getComputedStyle предполагает доступ к именам свойств CCS, состоящих из двух или более слов в

camelCase element.currentStyle и т. Д.), Стандартный способ ожидает свойства со словами, разделенными тире (например, и т. д.). Если вы хотите сохранить путь файла cookie только для домашней страницы, сделайте это следующим образом: maxHeight, fontSize, backgroundColor Также IEmax-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 они будут возвращать их так, как они были определены.

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

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

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

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

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

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

закрытии JavaScript внутри циклов — простой практический пример — переполнение стека jQuery вы можете сделать alert($("#theid").css("width")) Глядя на вывод

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

для записи, этому посту 5 лет. Сеть развивалась, развивалась и т. Д. Существуют способы сделать это с помощью Plain Old Javascript, что лучше.

Используя .css () в jquery, можно получить доступ к тегу стиля и изменить его.

Также смотрите

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