Ответ 1

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

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

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

Ответ 2

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

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

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

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

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

Ответ 3

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

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

Update

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

Ответ 4

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

например:

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

Ответ 5

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

const convertRestArgsIntoStylesArr = ([...args]) => {
    return args.slice(1);
}

const getStyles = function () {
    const args = [...arguments];
    const [element] = args;

    let stylesProps = [...args][1] instanceof Array ? args[1] : convertRestArgsIntoStylesArr(args);

    const styles = window.getComputedStyle(element);
    const stylesObj = stylesProps.reduce((acc, v) => {
        acc[v] = styles.getPropertyValue(v);
        return acc;
    }, {});

    return stylesObj;
};

Теперь вы можете использовать эту функцию следующим образом:

const styles = getStyles(document.body, "height", "width");

ИЛИ ЖЕ

const styles = getStyles(document.body, ["height", "width"]);