我有一个外部样式表，它将某些样式应用于给定元素。我希望能够将这些样式（使用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。我无法知道可以应用哪些样式。我试图解决的问题是能够获取元素并复制其样式（可能是未知的）并将它们应用于不同的元素。
答案 0 :(得分：8)
这是我想出的解决方案，它混合了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，那么无法阻止它们被应用。
答案 1 :(得分：2)
编辑：这个答案是在问题澄清之前写的。
提供您的元素ID，如下所示：
<td id="td_element" style="padding:5px">
<div id="div_element">
Apply the TD styles to this DIV (instead of the TD).
</div>
</td>
并使用
var td_element = $('#td_element')
$('#div_element').attr('style', td_element.attr('style'));
td_element.removeAttr('style');
当然你可以使用一个类 - 或者你可以使用以前的javascript代码中的元素。您需要自己决定引用元素的最佳方法。
答案 2 :(得分：2)
我知道这看起来很粗糙但是有效。最初从<td>复制所有计算出的样式并将其应用到<div>很容易this plugin from Mike Dunn。麻烦的一点是在复制后从<td>删除样式。 From what I can tell，您唯一能做的就是使用.css()手动将其重置为默认值。
<强> Working Example
$.fn.copyCSS = function (source) {
var dom = $(source).get(0);
var dest = {};
var style, prop;
if (window.getComputedStyle) {
var camelize = function (a, b) {
return b.toUpperCase();
};
if (style = window.getComputedStyle(dom, null)) {
var camel, val;
if (style.length) {
for (var i = 0, l = style.length; i < l; i++) {
prop = style[i];
camel = prop.replace(/\-([a-z])/, camelize);
val = style.getPropertyValue(prop);
dest[camel] = val;
}
} else {
for (prop in style) {
camel = prop.replace(/\-([a-z])/, camelize);
val = style.getPropertyValue(prop) || style[prop];
dest[camel] = val;
}
}
return this.css(dest);
}
}
if (style = dom.currentStyle) {
for (prop in style) {
dest[prop] = style[prop];
}
return this.css(dest);
}
if (style = dom.style) {
for (prop in style) {
if (typeof style[prop] != 'function') {
dest[prop] = style[prop];
}
}
}
return this.css(dest);
};
$('td').click(function () {
$('div').copyCSS('td');
$('td').removeAttr('style');
$("td").css({
'font-family': 'none',
'font-size': 'none',
'font-weight': 'none',
'font-style': 'none',
'color': '#000',
'text-transform': 'none',
'text-decoration': 'none',
'letter-spacing': 'none',
'word-spacing': 'none',
'line-height': 'none',
'text-align': 'none',
'vertical-align': 'none',
'direction': 'none',
'background-color': 'transparent',
'background-image': 'none',
'background-repeat': 'none',
'background-position': 'none',
'background-attachment': 'none',
'opacity': '1',
'width': 'none',
'height': 'none',
'top': '',
'right': '',
'bottom': '',
'left': '',
'margin-top': '0',
'margin-right': '0',
'margin-bottom': '0',
'margin-left': '0',
'padding-top': '0',
'padding-right': '0',
'padding-bottom': '0',
'padding-left': '0',
'border-top-width': '0',
'border-right-width': '0',
'border-bottom-width': '0',
'border-left-width': '0',
'border-top-color': '0',
'border-right-color': '0',
'border-bottom-color': '0',
'border-left-color': '0',
'border-top-style': '0',
'border-right-style': '0',
'border-bottom-style': '0',
'border-left-style': '0',
'position': 'static',
'display': '',
'visibility': 'visible',
'z-index': 'auto',
'overflow-x': 'auto',
'overflow-y': 'auto',
'white-space': 'normal',
'clip': 'auto',
'float': 'none',
'clear': 'none',
'cursor': 'default',
'list-style-image': 'none',
'list-style-position': '0',
'list-style-type': 'disc',
'marker-offset': '',
'padding': '0',
'transition': 'none',
'border-radius': 'none'
});
});
注意：显然我没有为所有可能的样式添加重置。
答案 3 :(得分：1)
编辑：代码更正
$('div').attr('style', $('td').attr('style'));
如果您想要移动，请稍后添加此行
$('td').attr('style', '');
我意识到这看起来很做人，但我没有其他选择器可以在这里工作。通常，您希望使用id或类而不是实际属性来执行此操作。
答案 4 :(得分：1)
不要移动样式是我的简答 - 找另一种方式。加载样式表后可以加载另一个样式表吗？如果是这样，添加一个样式表，覆盖您必须引用的样式表中定义的td和div填充。
答案 5 :(得分：0)
将实际的TD风格应用于课程怎么样？然后只需修改TD和DIV的类。或者您无法访问样式表？
CSS：
.class_name { padding: 5px }
HTML：
<td class="class_name">
<div>
Apply the TD styles to this DIV (instead of the TD).
</div>
</td>
JavaScript：
$(document).ready(function(){
$('.class_name').removeClass('class_name').children('div').addClass('class_name');
});
答案 6 :(得分：0)
您可以尝试以下步骤来复制样式表和<style>标记中特定元素定义的样式（代码有点冗长）：
<style>代码的内容以下是代码：
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<style>
#source { width: 100px; height: 100px; background-color: black; }
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table>
<tr>
<td id="source"></td>
</tr>
</table>
<div id="target"></div>
</body>
<script>
var source = $('#source'); // source
var target = $( '#target' ); // target
$( 'link[rel="stylesheet"]' ).each( function() {
$.get( $(this).attr( 'href' ), {}, function( data ) {
var css_obj = parse_css( data );
copy_css( css_obj, source, target );
});
});
$( 'style' ).each( function() {
var css = $(this).text();
var css_obj = parse_css( css );
copy_css( css_obj, source, target );
})
function copy_css( css_obj, source, target ) {
for( selector in css_obj ) {
if( $(selector)[0] === source[0] ) { // compare raw dom elements
for( prop in css_obj[selector] ) {
target.css( prop, css_obj[selector][prop] );
}
}
}
}
function parse_css( css ) {
var css = css.replace( /[\s\n\t]+/g, ' ' ); // remove extra spaces, tabs and newlines
css = css.replace( /\/\*(.|\n)+\*\//g, '' ); // remove comments
css = css.split( '}' ); // split into groups
var css_obj = []; // array to hold parsed css
for( i in css ) {
if( css[i] == false ) continue;
var chunks = css[i].split( '{' );
var selector = $.trim( chunks[0] );
var style_defs = [];
chunks = chunks[1].split( ';' );
for( j in chunks ) {
if( chunks[j] == false ) continue;
var style_def = chunks[j].split( ':' );
var property = $.trim( style_def[0] );
var value = $.trim( style_def[1].replace( /\;$/, '' ) );
style_defs[property] = value;
}
css_obj[selector] = style_defs;
}
return css_obj;
}
</script>
答案 7 :(得分：0)
我是这样做的：
var elFrom = document.getElementById('fromID');
var computedStyle = document.defaultView.getComputedStyle(elFrom,null);
$.each(computedStyle,function(key,value) {
$('#toID').css(value,$(elFrom).css(value));
});
答案 8 :(得分：-1)
从提供的答案中得到更广泛的解决方案..
<强> HTML
<td style="padding:5px">
<div class="inherit">
Apply the TD styles to this DIV (instead of the TD).
</div>
</td>
<强> JS
$('.inherit')
.attr('style', $(this)
.parents('td')
.attr('style')
)
.parents('td')
.removeAttr('style');