Question

是否有JS方法来确定元素属性的有效值？

众所周知，引用的CSS文件优先顺序是通过嵌入式CSS和元素的style属性中定义的值进行声明，最近/最本地生效。

浏览器元素检查工具可以确定元素样式属性的有效值，例如background-color。

有没有办法以编程方式发现效果值？

我使用了一个画布和js来创建相当于悬停的图像地图并单击视觉反馈，我很乐意在画布上对CSS样式做出响应。

例如，如果画布颜色设置为红色，则红色应为悬停高光和选择标记的基色。

目前这一切都是通过更改＆＃34;常量＆＃34;的值来完成的，但是对CSS的响应会很优雅。

Answer 1

您可以使用window.getComputedStyle()确定当前的有效样式。它返回一个奇特的类似数组的对象，它具有所有活动样式属性以及一些辅助函数。使用：

var el = document.getElementById('el1');
var computedStyle = window.getComputedStyle(el);
document.getElementById('style').innerHTML = computedStyle.cssText;

#el1 {
  background-color: blue;
}
div:first-of-type {
  height: 50px;
}

<div id="el1"></div>
<hr>
<div id="style"></div>

如何确定有效的价值

1 个答案: