如何获取HTML元素'；javascript中的s样式值？

我正在寻找一种从元素中检索样式的方法，该元素的样式由样式标记设置

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

我注意到，只有在使用javascript设置样式时，我才能使用上面的属性，但无法使用样式标记。

该属性仅允许您知道在该元素中定义为内联的CSS属性（以编程方式，或在元素的style属性中定义），您应该获得计算样式

以跨浏览器的方式实现这一点并不容易，IE有自己的方式，通过

元素.currentStyle

属性，其他浏览器实现的DOM Level 2标准方式是通过该方法

这两种方法有所不同，例如，IE属性希望您访问由camelCase中的两个或多个单词组成的CCS属性名称（例如，

maxHeight

，

fontSize

，

backgroundColor

，等等），标准方法希望属性中的单词以虚线分隔（例如，

最大高度

，

字体大小

，

背景色

等）

此外，IE

元素.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上，它们将返回定义的颜色

我目前正在撰写该主题的一篇文章，您可以按照我对该函数所做的更改进行操作。

在中，您可以执行

警报（$（“#theid”）.css（“宽度”）

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

更新

---

作为记录，这篇文章已经有5年历史了。网络已经发展了，向前移动了，等等。有一些方法可以用简单的旧Javascript实现这一点，这会更好。

我相信你现在可以使用Window.getComputedStyle（）

获取元素宽度的示例：

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

---

您可以使函数

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

或

---

相关：@BalusC:我认为这个问题更一般，也许主持人可以合并它们？..

document.defaultView

是

window

。因此，您可以直接使用

getComputedStyle

，而不是

document.defaultView.getComputedStyle

。您的开头一段解释了为什么将我的内联CSS移动到单独的文件e、 我的Javascript不起作用。我在网上找到的唯一一个地方指出了这一点，谢谢！@TenLeftFingers，不客气。我很高兴这个答案对你有帮助！好吧，我推荐它，即使你看过它=）他在问题中明确表示他不想使用库（jQuery是一个库…）这个答案非常简洁，告诉了我要找的东西！

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

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"]);