我正在寻找一种从样式标签中设置了样式的元素中检索样式的方法。

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

在身体里

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

我正在寻找不使用库的直接javascript。

我尝试了以下操作，但始终收到空白：

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

我注意到，如果我已使用javascript设置了样式，但无法使用样式标签，则只能使用以上内容。

该element.style属性仅让您知道在该元素中定义为内联的CSS属性（以编程方式或在元素的style属性中定义），则应获取计算出的style。

以跨浏览器的方式进行操作并非易事，IE通过该element.currentStyle属性具有自己的方式，而其他浏览器通过该方法实现的DOM Level 2标准方式document.defaultView.getComputedStyle。

这两种方法有差异，例如，在IEelement.currentStyle属性期待您访问的两个或多个单词组成的CCS属性名驼峰（例如maxHeight，fontSize，backgroundColor等），标准的方式希望与字词的属性与破折号分开（例如max-height，font-size，background-color，等等）。

同样，IEelement.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

在jQuery中，您可以做到alert($("#theid").css("width"))。

-如果您还没有看过jQuery，我强烈推荐它；它使许多简单的javascript任务变得轻而易举。

更新资料

作为记录，此职位是5岁。网络已经发展，发展，等等。有多种方法可以使用Plain Old Javascript来完成，这更好。

您可以使函数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"]);