Дублирование элемента (и его стиля) с помощью JavaScript - PullRequest
Новая
       8

Дублирование элемента (и его стиля) с помощью JavaScript

18 голосов
/ 04 декабря 2009

Для библиотеки JavaScript, которую я реализую, мне нужно , чтобы клонировать элемент, который имеет точно такой же стиль применения, что и оригинальный . Несмотря на то, что я приобрел достаточно приличное знание JavaScript как языка программирования, при его разработке я все еще новичок в DOM-скриптинге, поэтому любые советы о том, как этого можно достичь, были бы чрезвычайно полезны (и это необходимо без использования какой-либо другой библиотеки JavaScript).

Большое спасибо заранее.

Редактировать: cloneNode(true) не клонирует вычисленный стиль элемента. Допустим, у вас есть следующий HTML: 

<body>
  <p id="origin">This is the first paragraph.</p>
  <div id="destination">
    <p>The cloned paragraph is below:</p>
  </div>
</body>

И такой стиль, как: 

body > p {
  font-size: 1.4em;
  font-family: Georgia;
  padding: 2em;
  background: rgb(165, 177, 33);
  color: rgb(66, 52, 49);
}

Если вы просто клонируете элемент, используя что-то вроде: 

var element = document.getElementById('origin');
var copy = element.cloneNode(true);
var destination = document.getElementById('destination');
destination.appendChild(copy);

Стили не клонируются.

Ответы [ 2 ]

28 голосов
/ 04 декабря 2009

Вам нужно будет не только клонировать, но и, вероятно, захотеть клонировать deep . 

node.cloneNode(true);

Документация здесь .

Если для deep установлено значение false, ни один из дочерние узлы клонируются. Любой текст, который узел содержит не клонируется либо, так как он содержится в одном или больше дочерних текстовых узлов.

Если deep оценивается как true, все поддерево (включая текст, который может быть в дочерние текстовые узлы) тоже копируется. За пустые узлы (например, IMG и INPUT элементы) не имеет значения, Глубина установлена ​​в true или false, но вы все еще должны предоставить значение.

Редактировать: OP утверждает, что node.cloneNode(true) не копировал стили. Вот простой тест, который показывает обратное (и желаемый эффект) с использованием как jQuery, так и стандартного API DOM: 

var node = $("#d1");

// Add some arbitrary styles
node.css("height", "100px"); 
node.css("border", "1px solid red");

// jQuery clone
$("body").append(node.clone(true));

// Standard DOM clone (use node[0] to get to actual DOM node)
$("body").append(node[0].cloneNode(true));

Результаты видны здесь: http://jsbin.com/egice3/

Редактировать 2

Жаль, что вы не упомянули об этом раньше;) Вычисленный стиль полностью отличается. Измените свой CSS-селектор или примените этот стиль как класс, и у вас будет решение.

Редактировать 3

Поскольку эта проблема является законной, для которой я не нашел хороших решений, меня это достаточно обеспокоило, чтобы придумать следующее. Это не особенно грациозно, но оно выполняет свою работу (протестировано только в FF 3.5). 

var realStyle = function(_elem, _style) {
    var computedStyle;
    if ( typeof _elem.currentStyle != 'undefined' ) {
        computedStyle = _elem.currentStyle;
    } else {
        computedStyle = document.defaultView.getComputedStyle(_elem, null);
    }

    return _style ? computedStyle[_style] : computedStyle;
};

var copyComputedStyle = function(src, dest) {
    var s = realStyle(src);
    for ( var i in s ) {
        // Do not use `hasOwnProperty`, nothing will get copied
        if ( typeof i == "string" && i != "cssText" && !/\d/.test(i) ) {
            // The try is for setter only properties
            try {
                dest.style[i] = s[i];
                // `fontSize` comes before `font` If `font` is empty, `fontSize` gets
                // overwritten.  So make sure to reset this property. (hackyhackhack)
                // Other properties may need similar treatment
                if ( i == "font" ) {
                    dest.style.fontSize = s.fontSize;
                }
            } catch (e) {}
        }
    }
};

var element = document.getElementById('origin');
var copy = element.cloneNode(true);
var destination = document.getElementById('destination');
destination.appendChild(copy);
copyComputedStyle(element, copy);

См. Статью PPK под названием Get Styles для получения дополнительной информации и некоторых предостережений.

6 голосов
/ 05 апреля 2017

Посмотрев несколько хороших решений в сети, я решил объединить все лучшие аспекты каждого и придумать это.

Я оставил свое решение в простом суперскоростном Javascript, чтобы каждый мог перевести их на свой последний и отличный JS-аромат месяца.

Представление ванили из Манилы ..... 

 * @problem: Sometimes .cloneNode(true) doesn't copy the styles and your are left
 * with everything copied but no styling applied to the clonedNode (it looks plain / ugly). Solution:
 * 
 * @solution: call synchronizeCssStyles to copy styles from source (src) element to
 * destination (dest) element.
 * 
 * @author: Luigi D'Amico (www.8bitplatoon.com)
 * 
 */
function synchronizeCssStyles(src, destination, recursively) {

    // if recursively = true, then we assume the src dom structure and destination dom structure are identical (ie: cloneNode was used)

    // window.getComputedStyle vs document.defaultView.getComputedStyle 
    // @TBD: also check for compatibility on IE/Edge 
    destination.style.cssText = document.defaultView.getComputedStyle(src, "").cssText;

    if (recursively) {
        var vSrcElements = src.getElementsByTagName("*");
        var vDstElements = destination.getElementsByTagName("*");

        for (var i = vSrcElements.length; i--;) {
            var vSrcElement = vSrcElements[i];
            var vDstElement = vDstElements[i];
//          console.log(i + " >> " + vSrcElement + " :: " + vDstElement);
            vDstElement.style.cssText = document.defaultView.getComputedStyle(vSrcElement, "").cssText;
        }
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...