使用CSS只使用JavaScript獲取HTML

Question

我想要在與CSS的div div中的所有html。大多數的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>

有了這個，你可以通過所有的元素和屬性進行遍歷。這不是你可能需要的整個代碼，而是一個很好的起點。