получить html с css используя только javascript

Question

Я хочу получить все html в div с css. Большая часть css находится в классах во внешнем файле css.

document.getElementById("mydiv") 

Это только дает мне html с встроенным css. Возможно ли каким-либо образом сделать страницу с помощью CSS как встроенной, даже если она исходит из css-файлов?

Answer 1

Если вы хотите, чтобы получить другой HTML документ в DIV Использование IFRAME

<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

Вот возможное решение от MDN здесь является статья https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

и вот код.

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>

С этим можно перебрать все элементы и свойства. Это не весь код, который вам может понадобиться, но хорошая отправная точка.