読むと、純粋なJavascriptの

Question

私は機能、作成しようとしていますと、クラスのCSS値を印刷：

• は、特定のデータ要素を持つ要素をグラブを、すなわち「データ・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(); 

しかし、期待通りに機能が動作していません。 アイデア ありがとうございます。

Answer 1

コードが機能しています。

あなただけのforループで1行を削除する必要があります。

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フィドルに見ることができるようにそれは、それが動作します変更後。

Answer 2

チェックこの

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;