我正在尝试使用jQuery获取所选对象的HTML.我知道这个.html()功能; 问题是我需要包含所选对象的HTML(在这种情况下是一个表行,其中.html()只返回行内的单元格).
我已经四处搜索并发现了一些克隆对象的非常"hackish"类型的方法,将它添加到新创建的div等等,但这看起来真的很脏.有没有更好的方法,或新版本的jQuery(1.4.2)是否提供任何类型的outerHtml功能?
有没有一种方法可以让jQuery从现有元素中获取所有CSS并将其应用到另一个元素而不将它们全部列出?
我知道如果它们是样式属性,它会起作用attr(),但我的所有样式都在外部样式表中.
许多工具/ API提供了选择特定类或ID元素的方法.还可以检查浏览器加载的原始样式表.
但是,对于浏览器呈现元素,它们将编译所有CSS规则(可能来自不同的样式表文件)并将其应用于元素.这就是您在Firebug或WebKit Inspector中看到的内容 - 一个元素的完整CSS继承树.
如何在纯JavaScript中重现此功能而无需其他浏览器插件?
也许一个例子可以为我正在寻找的东西提供一些澄清:
<style type="text/css">
p { color :red; }
#description { font-size: 20px; }
</style>
<p id="description">Lorem ipsum</p>
Run Code Online (Sandbox Code Playgroud)
这里p#描述元素应用了两个CSS规则:红色和20像素的字体大小.
我想找到这些计算出的CSS规则源自的来源(颜色来自p规则等).
我有一个外部样式表,它将一些样式应用于给定元素.我希望能够将这些样式(使用JavaScript)完全移动到不同的元素,而无需事先了解正在应用的样式.
CSS:
td { padding: 5px }
div { }
Run Code Online (Sandbox Code Playgroud)
HTML:
<td>
<div>
Apply the TD styles to this DIV (instead of the TD).
</div>
</td>
Run Code Online (Sandbox Code Playgroud)
JavaScript:
$(document).ready(function(){
$('tr').children('td').each(function(){
//move the td styles to div
});
});
Run Code Online (Sandbox Code Playgroud)
我怎样才能做到这一点?
更新:要明确,我无法控制CSS.我无法知道可以应用哪些样式.我试图解决的问题是能够获取元素并复制其样式(可能是未知的)并将它们应用于不同的元素.