읽기 및 순수 자바 스크립트

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