我知道这$("#divId").html()会给我innerHtml。我还需要它的样式(可以通过类的方式定义),可以是内联style属性,也可以是单独<style>标签中的所有样式/类。
$("#divId").html()
style
<style>
可能吗?
更新 如果HTML类似于HTML <div id="testDiv">cfwcvb</div>并且#testDiv在外部样式表中定义了CSS类,该怎么办?
<div id="testDiv">cfwcvb</div>
#testDiv
UPDATE 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; }
然后,当我尝试获取的内部html $("#divId").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>
答案UPDATE 3 我在此页面本身的Chrome调试器工具的命令窗口中运行了以下代码,这就是我所看到的TypeError:Cannot read property 'rules' of undefined
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");
(不确定,以防万一)
局限性:使用CSSOM,样式表应来自同一来源。
function getElementChildrenAndStyles(selector) { var html = $(selector).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[c].rules || sheets[c].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(rules[r]); break; } } } } var style = rulesUsed.map(function(cssRule){ if (cssRule.style) { 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("#divId");