怎样在html里面获取样式,jQuery - 如何使用元素的HTML获取所有样式/ css(在内部/外部文档中定义)...

我知道$("#divId").html()会给我innerHtml.我还需要它的样式(可能通过类的方式定义)内联style属性或单独

可能吗？

更新

如果html是什么样的,

cfwcvb

并且#testDiv外部样式表中定义了css类？

更新2

很抱歉没有提前澄清这一点

如果这是我的HTML

Some innerText

样式在单独的样式表或头部样式中定义.

#divId {

clear: both;

padding: 3px;

border: 2px dotted #CCC;

font-size: 107%;

line-height: 130%;

width: 660px;

}

.someClass {

color: blue;

}

然后,当我尝试获取内部html $("#divId").html()或调用任何其他自定义函数时,我需要类似下面的内容

#divId {

clear: both;

padding: 3px;

border: 2px dotted #CCC;

font-size: 107%;

line-height: 130%;

width: 660px;

}

.someClass {

color: blue;

}

Some innerText

回答

我在Chrome Debugger工具的命令窗口中运行了以下代码,这个页面本身就是我看到的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 "\n\n" + html;

};

getElementChildrenAndStyles(".post-text:first");