<分区>
我想获取元素计算样式和应用该规则的 css(文件和行)。类似于使用“已计算”选项卡并单击值旁边的箭头时 Chrome 开发工具所做的事情。
简而言之，我希望能够使用 javascript 找出这两件事:
- 实际应用于该元素(计算样式)的 CSS 值是多少
- 找到计算样式后，我想知道它的来源(如文件名和行号)
我知道这可以使用 devtools 手动完成，但我需要通过脚本完成。
谢谢
标签 javascript html css
<分区>
我想获取元素计算样式和应用该规则的 css(文件和行)。类似于使用“已计算”选项卡并单击值旁边的箭头时 Chrome 开发工具所做的事情。
简而言之，我希望能够使用 javascript 找出这两件事:
我知道这可以使用 devtools 手动完成，但我需要通过脚本完成。
谢谢
最佳答案
您可以使用 Window.getComputedStyle()。使用示例:
<style>
#elem-container{
position: absolute;
left: 100px;
top: 200px;
height: 100px;
}
</style>
<div id="elem-container">dummy</div>
<div id="output"></div>
<script>
function getTheStyle(){
var elem = document.getElementById("elem-container");
var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
document.getElementById("output").innerHTML = theCSSprop;
}
getTheStyle();
</script>
参见 MDN Documentation了解更多如何使用此功能及其与不同浏览器的兼容性。
不幸的是，这种方法不会为您提供此值的来源位置。
关于javascript - 如何获得计算风格和这条规则的来源？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44055838/