使用纯Javascript读取并打印类的CSS值

我正在尝试创建一个函数，该函数：

• 获取具有特定数据元素的元素，即“data findDeclaration=element”
• 从该元素读取类
• 它读取指定给这个类的所有css值
• 在另一个特定数据元素（即data writeDeclaration=“element”）内显示所有类的规则/值

到目前为止，我的情况如下：

HTML：

    <span class="slap0" data-finddeclaration="element">The great white fox</span>
    <div class="description" data-writedeclaration="element">

    </div>

    <span class="slap1" data-finddeclaration="element">The great white fox</span>
    <div class="description" data-writedeclaration="element">

    </div>

    <span class="slap2" data-finddeclaration="element">The great white fox</span>
    <div class="description" data-writedeclaration="element">

    </div>

    <span class="slap3" data-finddeclaration="element">The great white fox</span>
    <div class="description" data-writedeclaration="element">

    </div>

function readOutCssRules() {
var dataElement = document.querySelectorAll('[data-finddeclaration="element"]');
var classRules = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
var writeDataElement = document.querySelectorAll('[data-writedeclaration="element"]');

for (var i = 0; i < dataElement.length; i++) {
    dataElement[i].className;
    if (classRules[i].selectorText == "." + dataElement[i].className) {
        console.log(classRules[i].cssText);

        writeDataElement[i].innerHTML = classRules[i].cssText;
    }
}


}
readOutCssRules();

大白狐
大白狐
大白狐
大白狐

JS：

    <span class="slap0" data-finddeclaration="element">The great white fox</span>
    <div class="description" data-writedeclaration="element">

    </div>

    <span class="slap1" data-finddeclaration="element">The great white fox</span>
    <div class="description" data-writedeclaration="element">

    </div>

    <span class="slap2" data-finddeclaration="element">The great white fox</span>
    <div class="description" data-writedeclaration="element">

    </div>

    <span class="slap3" data-finddeclaration="element">The great white fox</span>
    <div class="description" data-writedeclaration="element">

    </div>

function readOutCssRules() {
var dataElement = document.querySelectorAll('[data-finddeclaration="element"]');
var classRules = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
var writeDataElement = document.querySelectorAll('[data-writedeclaration="element"]');

for (var i = 0; i < dataElement.length; i++) {
    dataElement[i].className;
    if (classRules[i].selectorText == "." + dataElement[i].className) {
        console.log(classRules[i].cssText);

        writeDataElement[i].innerHTML = classRules[i].cssText;
    }
}


}
readOutCssRules();

函数readOutCssRules（）{ var dataElement=document.querySelectorAll（'[data finddeclaration=“element”]'）； var classRules=document.styleSheets[0]。规则| | document.styleSheets[0]。cssRules； var writedaateElement=document.querySelectorAll（“[data writedeclaration=“element”]”）； 对于（var i=0；i 但该功能没有按预期工作。 有什么想法吗？ 提前感谢。

您的代码正在运行

您只需删除for循环中的一行：

for (var i = 0; i < dataElement.length; i++) {
    //dataElement[i].className;   --> remove this
    if (classRules[i].selectorText == "." + dataElement[i].className) {
        console.log(classRules[i].cssText);

        writeDataElement[i].innerHTML = classRules[i].cssText;
    }
}

for（var i=0；i删除此
if（类规则[i].selectorText==“+”数据元素[i].className）{
log（classRules[i].cssText）；
writeDataElement[i].innerHTML=classRules[i].cssText；
}
}

在这些更改之后，它将工作，正如您在fiddle中看到的那样。

检查此项

输出：

The great white fox
color: blue;
The great white fox
color: red;
The great white fox
color: yellow;

---

您的浏览器控制台中出现了什么错误？我确实获得了类的内容，但是如果我向html结构添加更多元素，它将不会显示它们。另外，我需要查看规则，而不是相应div中正确显示的类名。我不允许使用jQuery，否则这不会有太大问题：）为什么要检查CSS==class？这就是您想要实现的吗？您可以将该类附加到上。@HudsonPH如果我不检查它，它将卸载整个样式表…：/遗憾的是，没有。。。仅当类存在时才会显示CSS，如果我添加更多元素，则根本不会显示较新的规则。您能解释一下您试图实现的功能吗？该函数被调用，并在HTML中搜索标记数据finddeclaration=“element”。每次遇到一个元素时，它都会读取属于该元素的类。通过类，它获取其规则/值。然后，通过使用data writedeclaration=“element”，它发布这些规则，而不显示类，只显示括号中的规则。因此，您只需添加一个简单的字符串replace:writedaelement[i]。innerHTML=classRules[i]。cssText.replace（“.”+dataElement[i].className，”）。再次检查fiddle。实现了它，但出现的问题如下：如果插入到真正的CSS样式表中，使用重置规则和所有其他内容，循环长度不足以找到类。我已经遇到的另一个问题是，如果一个类被复制，它将不会被显示。感谢您的努力，我正在尝试使用您发布的内容。实现了它，但出现的问题如下：如果插入到真正的CSS样式表中，使用重置规则和所有其他内容，循环长度不足以找到类。我已经遇到的另一个问题是，如果一个类被复制，它将不会被显示。感谢您的努力，我正在尝试使用您发布的内容。在这种情况下，您需要对每种类型进行验证：/I我自己也很害怕。。。我希望我错过了什么。但是非常感谢你的投入。