我正在寻找一种方法来从具有样式标记设置的样式的元素中检索样式。
<style>
#box {width: 100px;}
</style>
在体内
<div id="box"></div>
我正在寻找不使用库的直接 javascript。
我尝试了以下方法，但一直收到空白：
alert (document.getElementById("box").style.width);
alert (document.getElementById("box").style.getPropertyValue("width"));
我注意到，如果我使用 javascript 设置了样式，我只能使用上述内容，但无法使用样式标签。
【问题讨论】：
标签： javascript html css stylesheet
使用getComputedStyle函数，计算样式包含所有CSS属性设置为一个元素。即使不为元素设置属性。您仍然会在计算样式中找到该属性。
示例：
<style>
#Body_element {
color: green;
}
</style>
<body id="Body_element">
<script>
alert(getComputedStyle(Body_element).color)
</script>
</body>
【讨论】：
您可以创建函数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"]);
【讨论】：
我相信你现在可以使用 Window.getComputedStyle()
var style = window.getComputedStyle(element[, pseudoElt]);
获取元素宽度的示例：
window.getComputedStyle(document.querySelector('#mainbar')).width
【讨论】：
在jQuery，你可以做alert($("#theid").css("width"))。
-- 如果你没有看过 jQuery，我强烈推荐它；它使许多简单的 JavaScript 任务变得毫不费力。
为了记录，这篇文章已有 5 年历史了。网络已经发展，继续前进，等等。有一些方法可以使用 Plain Old Javascript 来做到这一点，这更好。
【讨论】：
element.style 属性让您只知道在该元素中定义为 inline 的 CSS 属性（以编程方式，或在元素的 style 属性中定义），您应该获得 计算样式。
跨浏览器的方式没那么容易做到，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 上它们将按原样返回颜色已定义。
我目前正在撰写该主题的一篇文章，您可以关注我对这个功能所做的更改here。
【讨论】：
document.defaultView 是 window。所以你可以直接使用getComputedStyle，而不是document.defaultView.getComputedStyle。