Копировать стиль без удаления элемента еще на jquery

Question

Это Html :( Пример)

<div id="id1" style="width:100px;background: rgb(196, 14, 14);">1</div>
<div id="id2" style="margin-top:10px">2</div>

to

<div id="id1" style="width:100px;background: rgb(196, 14, 14);">1</div>
<div id="id2" style="width:100px;background: rgb(196, 14, 14);margin-top:10px">2</div>

Это js:

var x = $('#id1').clone().attr('style');
$('#id2').attr('style', x);

Я не хочу, чтобы этот код margin-top:10px был удален.

Скрипка

Answer 1

Этот код может помочь вам динамически обновлять атрибут стиля.

$('#id2').attr('style', $('#id2').attr('style') + ';' +$('#id1').attr('style'));

Answer 2

Итак, получите существующий стиль из элемента, добавьте к нему x и обновите атрибут стиля элемента с помощью результата. Также нет причин использовать clone (). Просто получите атрибут style.

var x = $('#id1').attr('style');
var existingStyle = $('#id2').attr('style');
$('#id2').attr('style', existingStyle + ' ' + x);

Однако лучший способ сделать это - использовать классы и CSS. Затем вы можете просто использовать addClass(), чтобы добавить новый класс к элементу.