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

Question

我有这段代码，可以复制一个元素的内容并将其放在另一个元素上。但我实际上想复制内联样式，尤其是定位。有没有办法只复制位置样式，以便在我悬停时信息窗口将准确地出现在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代码中插入它？

Answer 1

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

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

由于 .offset() 返回一个 {top: ..., left: ...} 对象，因此您可以更紧凑地将上述内容编写为：

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

Answer 2

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

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

查看 CSS 文档。所有方法都设计有一个签名，该签名在调用时提供属性的实际值，如果使用其他参数调用，则将对象分配给这些属性。