我有一个外部样式表,它将一些样式应用于给定元素.我希望能够将这些样式(使用JavaScript)完全移动到不同的元素,而无需事先了解正在应用的样式.
CSS:
td { padding: 5px }
div { }
HTML:
<td>
<div>
Apply the TD styles to this DIV (instead of the TD).
</div>
</td>
JavaScript:
$(document).ready(function(){
$('tr').children('td').each(function(){
//move the td styles to div
});
});
我怎样才能做到这一点？
更新:要明确,我无法控制CSS.我无法知道可以应用哪些样式.我试图解决的问题是能够获取元素并复制其样式(可能是未知的)并将它们应用于不同的元素.
这是我想出的解决方案,它混合了document.defaultView.getComputedStyle和jQuery的.css():
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" > </script>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="test" style="background-color: #FF7300">
<p>Hi</p>
</div>
<a href="#" id="button">Apply styles</a>
<script>
$("#button").click(function() {
var element = document.getElementById("test");
$("#victim").css(document.defaultView.getComputedStyle(element, null));
});
</script>
<div id="victim">
<p>Hi again</p>
</div>
</body>
//style.css
#test {
border: 3px solid #000000;
}
这样做是复制计算出的样式对象,包括style.css和内联样式,并使用jQuery的.css()将其设置为另一个div.
我希望我没有误解这个问题,而这正是你所需要的.
编辑:我忘了的是你要求"移动"样式而不是复制它.使用jQuery的.removeClass()并使用.attr()删除样式属性来删除前一个div中的样式非常简单,但是你必须记住,如果有任何样式规则应用于元素的ID,那么无法阻止它们被应用.
编辑：代码已更正
$('div').attr('style', $('td').attr('style'));
如果你想移动只需添加这一行
$('td').attr('style', '');
我意识到这看起来很做作，但我没有其他选择器可以使用。通常，您需要使用 id 或类而不是实际属性来执行此操作。
| 归档时间： |
|
| 查看次数： |
7856 次 |
| 最近记录： |