閱讀和使用純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

回答

相關問題