阅读和使用纯JavaScript

我试图创建一个函数，它打印类的CSS值：阅读和使用纯JavaScript

抓斗元素与特定的数据元素，即“数据findDeclaration =元素”
从这个元素，类被读取
它读出所有指定为这个类
另一个具体的数据元素（即数据writeDeclaration =“元件”）的所有类规则/数值内显示的CSS值。

这里就是我至今：

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>

JS：

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();

但随着预期的功能无法正常工作。任何想法？在此先感谢。

来源

2016-06-14 Sidius

你在你的浏览器控制台得到什么错误？ –

我确实得到了类的内容，但是如果我在html结构中添加更多元素，它将不会显示它们。另外，我需要看到规则，而不是类名，正确显示在相应的div内。我不被允许使用jQuery，否则这不会有太大的问题:) – Sidius

为什么你要检查CSS == Class？ – HudsonPH

您的代码正在工作。

你只需要删除一行在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; 
    } 
}

之后变化，它会工作，因为你可以在this小提琴看到。

来源

2016-06-14 07:26:48 Ygalbel

不幸的是... 只有当类存在时才显示CSS，如果添加更多元素，则根本不显示新规则。 – Sidius

你能解释你试图达到什么吗？ – Ygalbel

函数被调用，并通过HTML搜索标签 data-finddeclaration =“element”。每遇到一个，它就读出属于这个元素的类。通过课堂，它抓住了它的规则/价值。然后通过使用data-writedeclaration =“element”，它会发布这些规则，而不显示类，只是括号中的规则。 – Sidius

入住这

https://jsfiddle.net/g6tu77mg/1/

var element = classRules[i].cssText 
var css= element.substring(element.lastIndexOf("{")+1,element.lastIndexOf("}")); 
writeDataElement[i].innerHTML = css;

输出：

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

来源

2016-06-14 08:39:12 HudsonPH

实现它，但发生的问题如下：如果插入一个真正的CSS样式表，使用重置规则和所有其他东西，循环长度不足以找到类。我已经遇到的另一个问题是，如果一个类是重复的，它不会被显示。感谢您的努力，我试图与您发布的内容一起工作。 – Sidius

在这种情况下，您需要对每种类型进行验证：/ – HudsonPH

我自己也怕这个......我希望有一些我错过了。但非常感谢您的意见。 – Sidius

阅读和使用纯JavaScript

回答

相关问题