jQuery - 如何使用元素的HTML获取所有样式/ css(在内部/外部文档中定义)
Ism*_*ilS 18 javascript css jquery styles
我知道$("#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;
}
然后,当我尝试获取内部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>
更新3 for kirilloid的回答
我在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 "<style>\n" + style + "\n</style>\n\n" + html;
};
getElementChildrenAndStyles(".post-text:first");
kir*_*oid 12
outerHTML(不确定,你需要它 - 以防万一)
限制:使用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");
没有jQuery也没有IE支持,这就是我所能做的:
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<script type = "text/javascript">
Element.prototype.getStyles = function () {
var array = {};
var styles = window.getComputedStyle (this, null);
for (var i = 0; i < styles.length; i ++) {
var style = styles[i];
array[style] = styles[style];
}
return array; // return new Array (array, this.innerHTML); You can also return the HTMl content. I don't think its necessary
}
window.addEventListener ("load", function () {
var divId = document.getElementById ("divId");
var someClass = document.getElementsByClassName ("someClass");
var string = "";
var styles = divId.getStyles ();
for (var i in styles) {
string += i + ": " + styles[i] + "\n";
}
alert (string);
alert ("In-line style: Height ->" + styles["height"] + "\n" + "Out-line style: Width ->" + styles["width"])
alert ("HTML: " + divId.innerHTML);
// Same thing with the span element
}, false);
</script>
<style>
#divId {
clear: both;
padding: 3px;
border: 2px dotted #CCC;
font-size: 107%;
line-height: 130%;
width: 660px;
}
.someClass {
color: blue;
}
</style>
<title>Test</title>
</head>
<body>
<div id = "divId" style = "height: 100px">
<span class = "someClass">Some innerText</span>
</div>
</body>
</html>
您可以获取一个样式对象,该样式对象表示window.getComputedStyle()在大多数浏览器中使用的元素的计算样式以及currentStyleIE中元素的属性.但是,有几种浏览器差异,其中返回了快捷方式属性(如background),颜色RGB值,长度和均匀值font-weight(请参阅此有用的测试页).仔细测试.
function computedStyle(el) {
return el.currentStyle || window.getComputedStyle(el, null);
}
alert(computedStyle(document.body).color);
| 归档时间： |
|
| 查看次数： |
38891 次 |
| 最近记录： |