如何使用JavaScript将所有计算出的CSS样式移动到一个元素并将其应用于另一元素? [英] How to move all computed CSS styles from one element and apply them to a different element using JavaScript?
问题描述
我有一个外部样式表，该样式表将某些样式应用于给定元素.我希望能够将这些样式(使用JavaScript)完全移动到另一个元素，而无需事先了解要应用的样式.
I have an external stylesheet that is applying some styles to a given element. I want to be able to move those styles (using JavaScript) to a different element entirely, without having prior knowledge of the styles that are being applied.
CSS:
td { padding: 5px }
div { }
HTML:
<td>
<div>
Apply the TD styles to this DIV (instead of the TD).
</div>
</td>
JavaScript:
The JavaScript:
$(document).ready(function(){
$('tr').children('td').each(function(){
//move the td styles to div
});
});
我该如何实现?
更新:需要明确的是，我无法控制CSS.我无法知道可以应用哪些样式.我要解决的问题是能够获取一个元素并复制其样式(可能未知)并将其应用于其他元素.
Update: To be clear, I have no control over the CSS. I have no way of knowing what styles may be applied. The problem that I'm trying to solve is being able to take an element and copy its styles (which may be unknown) and apply them to a different element.
推荐答案
这是我想出的解决方案，它混合了document.defaultView.getComputedStyle和jQuery的.css():
This is a solution I figured out, it mixes document.defaultView.getComputedStyle and jQuery's .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
What this does is copy the computed style object, including the style.css and the inline style, and set it to the other div using jQuery's .css()
我希望我不会误解这个问题，而这正是您所需要的.
I hope I didn't misunderstand the question and that this is what you need.
我忘记的是您要求移动"样式而不是复制样式.使用jQuery的.removeClass()和.attr()删除样式属性，从上一个div中删除样式非常简单，但是要记住，如果有任何样式规则应用于元素的ID，无法阻止它们被应用.
Something I forgot is that you asked to 'move' the style rather than copy it. It's very simple to remove styles from the previous div using jQuery's .removeClass() and using .attr() to remove the style attribute, but you have to keep in mind that if there are any style rules being applied to the element's ID, there's no way to keep them from being applied.
这篇关于如何使用JavaScript将所有计算出的CSS样式移动到一个元素并将其应用于另一元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
