jQuery를 사용하여 스타일을 인라인으로 만들기

Question

깨끗한 스타일 시트 기반 디자인을 추악한 인라인 스타일 디자인 (뉴스 레터 편집기 용)으로 자동 변환하는 방법을 실험하고 있습니다.

요소 (div, p, span, h1, h2 등)에 적용되는 모든 스타일을 가져 와서 해당 요소에 인라인으로 적용 할 수 있습니까?

그래서 그 대신 스타일 시트에서이 같은 내 스타일이 멋지고 아름다운 데 :

#topHeader { color: #222; background: red; width: 210px; height: 110px;} 

을가 인라인 이렇게 될 갖는

<div id="topHeader" style="color: #222; background: red; width: 210px; height: 110px;"> 

이 전혀 가능하다면 누군가가 알고 있다면, 가능하다면 나를 올바른 방향으로 보내주십시오.

덕분에 어쨌든 :)

Answer 1

이 당신에게 흥미로운 일이 될 수 있습니다

• IE : currentStyle
• 기타 : getComputedStyle

Answer 2

당신은 아마도 .style 멤버를 사용하여이 작업을 수행 할 수 참조하고있는 DOM 요소 이 라인을 따라 귀하의 예제를 사용하여, 어쩌면 뭔가 (테스트되지 않은) : 문서의 스타일과 규칙을 반복 할 수

var el  = document.getElementById('topHeader'); 
var styles = new Array(); 

for (var key in el.style) { 
    // You'll probably need to do some more conditional work here... 
    if (el.style[key]) { 
     styles.push(key + ': ' + el.style[key]); 
    } 
} 

el.setAttribute('style', styles.join('; ')); 

Answer 3

:

$.each(document.styleSheets, function() { 
    $.each(this.cssRules || this.rules, function() { 
     var style = {}; 
     var styles = this.cssText.split(/;\s*/g); 
     $.each(styles, function() { 
      var parts = styles.split(/\:\s*/g); 
      style[parts[0]] = parts[1]; 
     }); 
     $(this.selectorText).css(style); 
    }); 
}); 

는 모든 브라우저 .selectorText을 노출하고, .cssText은 브라우저 별 분석이 필요합니다 . 희망적으로 이것은 올바른 방향으로 당신을 가리키기에 충분합니다.

Answer 4

나는 적당한 성공을 다음 사용했습니다 : 더 복잡한 스타일링 배경 선택기 등의

$('#parentidhere').find('*').each(function (i, elem){elem.style.cssText=document.defaultView.getComputedStyle(elem,"").cssText;}); 

특정 스타일은 여전히 ​​있지만 사라지는 것, 나는 아직 이유를 알아낼 수 없었다. 또한 이전 브라우저에서는 작동하지 않지만 제 경우에는 중요하지 않습니다.