【发布时间】：2011-06-14 11:06:39
【问题描述】：
我知道$("#divId").html() 会给我innerHtml。我还需要它的样式（可能通过类来定义），要么是内联的style 属性，要么是单独的<style> 标记中的所有样式/类。
有可能吗？
更新
如果 html 类似于 <div id="testDiv">cfwcvb</div> 并且在外部样式表中定义了 #testDiv 的 css 类怎么办？
更新 2
很抱歉没有早点澄清这一点
如果这是我的 HTML
<div id="divId">
<span class="someClass">Some innerText</span>
</div>
样式在单独的样式表或头部样式中定义。
#divId {
clear: both;
padding: 3px;
border: 2px dotted #CCC;
font-size: 107%;
line-height: 130%;
width: 660px;
}
.someClass {
color: blue;
}
然后，当我尝试获取 $("#divId").html() 的内部 html 或调用任何其他自定义函数时，我需要如下所示的内容
<style>
#divId {
clear: both;
padding: 3px;
border: 2px dotted #CCC;
font-size: 107%;
line-height: 130%;
width: 660px;
}
.someClass {
color: blue;
}
</style>
<div id="divId">
<span class="someClass">Some innerText</span>
</div>
kirilloid 的回答更新 3
我在 this 页面本身的 Chrome 调试器工具的命令行窗口中运行了下面的代码，这就是我看到的 TypeError: Cannot read property 'rules' of undefined
function getElementChildrenAndStyles(selector) {
var html = $(selector).get(0).outerHTML;
selector = selector.split(",").map(function(subselector){
return subselector + "," + subselector + " *";
}).join(",");
elts = $(selector);
var rulesUsed = [];
// main part: walking through all declared style rules
// and checking, whether it is applied to some element
sheets = document.styleSheets;
for(var c = 0; c < sheets.length; c++) {
var rules = sheets[i].rules || sheets[i].cssRules;
for(var r = 0; r < rules.length; r++) {
var selectorText = rules[r].selectorText;
var matchedElts = $(selectorText);
for (var i = 0; i < elts.length; i++) {
if (matchedElts.index(elts[i]) != -1) {
rulesUsed.push(CSSrule); break;
}
}
}
}
var style = rulesUsed.map(function(cssRule){
if ($.browser.msie) {
var cssText = cssRule.style.cssText.toLowerCase();
} else {
var cssText = cssRule.cssText;
}
// some beautifying of css
return cssText.replace(/(\{|;)\s+/g, "\$1\n ").replace(/\A\s+}/, "}");
// set indent for css here ^
}).join("\n");
return "<style>\n" + style + "\n</style>\n\n" + html;
};
getElementChildrenAndStyles(".post-text:first");
【问题讨论】：
-
我认为你的标题应该是“如何获得所有样式..”，这也是类似的：stackoverflow.com/questions/754607/…
-
你能告诉为什么你到底需要这个吗？也许有一种简单的方法可以做到这一点。
-
因为我正在将元素的 html 从一个文档复制到另一个窗口的 iFrame 文档。
标签： javascript jquery css styles