Скопировать все стили из одного элемента в другой

Как я могу получить каждый стиль (даже унаследованный) от элемента A до элемента B? в javascript или с помощью jquery.

сообщите, что у меня есть элемент <p class="foo">...</p>, и я добавляю новый элемент <div />, который будет выглядеть так же, кроме содержимого.

Ответ 1

Если вас не волнует IE, то вы можете сделать это:

var p = document.getElementById("your_p_id");
var div = document.createElement("div");
div.innerHTML = "your div content";
div.style.cssText = document.defaultView.getComputedStyle(p, "").cssText;

#your_p_id {
  color: #123124;
  background-color: #decbda;
}

<textArea id="your_p_id">Hello world!</textArea>

Ответ 2

Попробуйте скопировать все CSS-свойства следующим образом:

$("#target").css("border", $("#source").css("border"));
$("#target").css("background", $("#source").css("background"));

#source {
  background-color: #dfeacb !important;
  color: #bbae4e !important;
  border: 1px solid green !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textArea id="source">Hello world!</textArea>
<textArea id="target">Hello world!</textArea>

Ответ 3

На самом деле, ответ sdleihssirhc не будет работать в Firefox, так как getComputedStyle(p, "").cssText вернет пустую строку, это давняя и известная ошибка: https://bugzilla.mozilla.org/show_bug.cgi?id=137687

Решение также для поддержки Firefox состоит в том, чтобы getComputedStyle свойства getComputedStyle и создать строку CSS вручную:

const styles = window.getComputedStyle(node);
if (styles.cssText !== '') {
    clonedNode.style.cssText = styles.cssText;
} else {
    const cssText = Object.values(styles).reduce(
        (css, propertyName) =>
            '${css}${propertyName}:${styles.getPropertyValue(
                propertyName
            )};'
    );

    clonedNode.style.cssText = cssText
}