我正在寻找一种方法来从具有样式标签设置的样式的元素中检索样式。
<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()
var style = window.getComputedStyle(element[, pseudoElt]);
获取元素宽度的示例：
window.getComputedStyle(document.querySelector('#mainbar')).width
在jQuery 中，您可以做到alert($("#theid").css("width"))。
-- 如果你还没有看过 jQuery，我强烈推荐它；它使许多简单的 JavaScript 任务变得毫不费力。
郑重声明，这篇文章已有 5 年历史。网络已经发展，继续前进，等等。有一些方法可以使用普通的旧 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"]);
使用getComputedStyle函数，计算样式包含设置到元素的所有 CSS 属性。即使不为元素设置属性。您仍会在计算样式中找到该属性。
例子：
<style>
#Body_element {
color: green;
}
</style>
<body id="Body_element">
<script>
alert(getComputedStyle(Body_element).color)
</script>
</body>