我想要在与CSS的div div中的所有html。大多数的CSS都在外部css文件的类中。使用CSS只使用JavaScript获取HTML
document.getElementById("mydiv")
这只给我HTML与内联的CSS。 即使它来自css文件,它甚至有可能以某种方式呈现与CSS内联的页面作为内联?
我想要在与CSS的div div中的所有html。大多数的CSS都在外部css文件的类中。使用CSS只使用JavaScript获取HTML
document.getElementById("mydiv")
这只给我HTML与内联的CSS。 即使它来自css文件,它甚至有可能以某种方式呈现与CSS内联的页面作为内联?
如果你想获得另一个HTML文档中的一个div使用iframe
<iframe src="one.htm" height="200" width="300"></iframe>
如何在这里使用此功能,从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);
});
将两者结合以获取所需的信息。
下面是从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>
有了这个,你可以通过所有的元素和属性进行遍历。这不是你可能需要的整个代码,而是一个很好的起点。
你是什么意思得到另一个html文件?我只是希望HTML代码作为一个字符串与CSS,所以我可以传递给我的C#控制器 –