将特定样式从一个元素复制到另一个元素答案

【问题标题】：Copying specific styles from one element to another将特定样式从一个元素复制到另一个元素
【发布时间】：2012-09-27 09:14:26
【问题描述】：

我有这段代码可以复制一个元素的内容并将其放在另一个元素上。但我其实想复制内联样式，尤其是定位。有没有办法只复制位置样式，这样当我悬停时，信息窗口就会准确地出现在a.star 的位置？

$(document).ready(function(){
  $('a.star').hover(function(){
    var instrument = '.instrument_info#' + $(this).attr('instrument');
    var htmlCode = $(instrument).html();
    $('.instrument_output .instrument_detail').html(htmlCode);
    $('.instrument_output').slideToggle();
  })
});

我想得到这个的内联定位：<div class="instrument_info" id="drums" style="top:95px; left:294px"> 并将它放在另一个 div 中。如何在我的 jQuery 代码中插入它？

【问题讨论】：

标签： jquery css styles copy inline

【解决方案1】：

.html() 根本不包含内联样式。你需要使用jQuery的.css()函数；

$(".target_elements").css({top: $("someElement").offset().top, left: $("someElement").offset().left});

并且由于.offset() 返回一个{top: ..., left: ...} 对象，您可以将上面的内容更简洁地写为：

$(".target_elements").css($("someElement").offset());

【讨论】：

@tea_clipper 不客气！如果这对你有用，别忘了accept this answer！
+1 作为旁注，您也可以这样做:) $(".target_elements").css($("someElement").offset());
@pebbl 当然——感谢您指出这一点！我会编辑它。
我还能在一个函数中同时获得 html attr 和 css 标签...
@tea_clipper 你能再解释一下吗？

【解决方案2】：

您必须从一个 DOM 元素中读取这些属性并将它们分配给另一个。

 var foo_offset = $('#foo').offset() # returns {left: 100, top: 100}
 $('#bar').offset(foo_offset)        # #bar's offset set to #foo's

查看CSS documentation。所有方法都设计有一个签名，该签名在调用时为您提供属性的实际值，并在使用附加参数调用时将对象分配给这些属性。

【讨论】：