javascript - HTML5 CSS 类。现在有办法检查 css 类的值吗？

Question

我正在尝试做一些我认为微不足道但看起来不可能的事情:打印与 div 关联的 css 类的值。应该很容易。不是为了我。

您的任务:使用 console.log() 回显与 div 关联的类的顶部(或左侧或高度等)的值。

我错过了什么？

更新

好的，更多上下文:

使用纯 Javascript - 没有 JQuery 我已经完成以下操作来创建一个 div。将它插入到 DOM 中，并为其分配一个类:

// css class name
var sequenceDivClassName="igv-sequence-div",

classyDiv = document.createElement('div');
classyDiv.setAttribute('id', classyDivID);

parentDiv = document.getElementById(parentDivID);
parentDiv.appendChild(classyDiv);

document.getElementById(classyDivID).className = sequenceDivClassName;

这是 CSS 类的样子:

.igv-sequence-div {
    color:red;
    position: absolute;
    top: 0;
    left: 0;
    height: 15px;
    width:100%;
}

我正在 Qunit 单元测试中执行所有这些操作，我想对高度进行断言。我如何访问类的 height 字段以便我可以在断言中使用它 - equal(...)。

Answer 1

HTML 类没有直接关联的 CSS 规则。

CSS 规则集带有选择器。这些可以由单个简单选择器(可能是类选择器)或多个选择器(甚至多个选择器组)组成。

多个规则集可以有匹配相同元素的选择器。实际应用于给定元素的 CSS 规则由级联和继承的组合决定。

您可以使用 getComputedStyle 找出与元素关联的特定规则.

您可以通过遍历 document.styleSheets 来获取与文档关联的所有规则的列表。然后遍历每个结果的 rules 属性。然后您可以检查 selectorText 属性以查看它是否与给定的类选择器匹配。