자바 스크립트를 사용하여 CSS로 html 가져 오기

Question

CSS로 div에있는 모든 HTML을 가져오고 싶습니다. CSS의 대부분은 외부 CSS 파일의 클래스에 있습니다.

document.getElementById("mydiv") 

이것은 단지 인라인 CSS가있는 html을 제공합니다. css 파일에서 오는 경우에도 어떻게 든 인라인으로 CSS가있는 페이지를 렌더링 할 수 있습니까?

Answer 1

당신은 DIV의 사용 iframe에 또 다른 HTML 문서를 얻고 싶다면

<iframe src="one.htm" height="200" width="300"></iframe> 

Answer 2

어떻게 this answer에서 공급 여기에이 기능을 사용하는 방법에 대한 :

: 유스 케이스로

function css(a) { 
    var sheets = document.styleSheets, o = {}; 
    for (var i in sheets) { 
     var rules = sheets[i].rules || sheets[i].cssRules; 
     for (var r in rules) { 
      if (a.is(rules[r].selectorText)) { 
       o = $.extend(o, css2json(rules[r].style), css2json(a.attr('style'))); 
      } 
     } 
    } 
    return o; 
} 

function css2json(css) { 
    var s = {}; 
    if (!css) return s; 
    if (css instanceof CSSStyleDeclaration) { 
     for (var i in css) { 
      if ((css[i]).toLowerCase) { 
       s[(css[i]).toLowerCase()] = (css[css[i]]); 
      } 
     } 
    } else if (typeof css == "string") { 
     css = css.split("; "); 
     for (var i in css) { 
      var l = css[i].split(": "); 
      s[l[0].toLowerCase()] = (l[1]); 
     } 
    } 
    return s; 
} 

을

var style = css($("#myDiv")); // Retrieve all styles from $("#myDiv") 
$("#elementToPutStyleInto").css(style); // Put those styles onto another element. 

그런 다음 각 요소를 <div> :

// .find('*') gets every child element. 
$('#myDiv').find('*').each(function() { 
    // Do stuff here to each element using `this` 
    console.log(this); 
}); 

필요한 정보를 얻으려면이 둘을 결합하십시오.

Answer 3

여기 여기 여기 문서 https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

및 코드 인 MDN에서 가능한 해결책이다. 모든 요소와 속성을 반복 할 수있는이와

function getTheStyle(){ 
 
    var elem = document.getElementById("elem-container"); 
 
    var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height"); 
 
    document.getElementById("output").innerHTML = theCSSprop; 
 
    } 
 
    getTheStyle();

#elem-container{ 
 
    position: absolute; 
 
    left:  100px; 
 
    top:  200px; 
 
    height: 100px; 
 
}

<div id="elem-container">dummy</div> 
 
<div id="output"></div>

. 필요한 전체 코드는 아니지만 좋은 출발점입니다.