Как я могу программно скопировать все атрибуты стиля от одного элемента DOM до другого
У меня есть страница с двумя кадрами, и мне нужно к (с помощью JavaScript), копируют элемент и все его вложенные элементы (это - дерево ул./лития), и самое главное это - стиль от одного кадра до другого.
Я получаю все содержание через присвоение innerhtml, и я могу расположить новый элемент во второй кадр с dest.style.left и dest.style.top, и это работает. Но я пытаюсь получить всю информацию о стилях, и ничего не происходит.
Я использую getComputedStyle для получения заключительного стиля для каждого исходного элемента, поскольку я циклично выполняюсь через каждый узел затем и присвоение их к той же позиции в целевом nodelist, и ничто, оказывается, визуально не изменяет стиль.
Что я пропускаю?
3 ответа
Вы пробовали cloneNode ? Он может скопировать элемент и все его дочерние элементы одним махом.
http://www.w3schools.com/dom/met_element_clonenode.asp
С помощью getComputedStyle вы можете получить свойство cssText , которое будет извлекать весь вычисленный стиль в строке CSS. :
var completeStyle = window.getComputedStyle(element1, null).cssText;
element2.style.cssText = completeStyle;
К сожалению, getComputedStyle не поддерживается Internet Explorer, который вместо этого использует currentStyle . Вдвойне прискорбным является тот факт, что currentStyle возвращает null для cssText , поэтому тот же метод нельзя применить к IE. Я постараюсь что-нибудь придумать для вас, если меня никто не опередит :-)
Я подумал об этом, и вы можете подражать вышесказанному в IE, используя оператор for ... in :
var completeStyle = "";
if ("getComputedStyle" in window)
completeStyle = window.getComputedStyle(element1, null).cssText;
else
{
var elStyle = element1.currentStyle;
for (var k in elStyle) { completeStyle += k + ":" + elStyle[k] + ";"; }
}
element2.style.cssText = completeStyle;
Ну, я отказался от первоначальной попытки получить информацию о [вычисленном] стиле из исходного тега, у меня просто так и не получилось.
Вместо этого я попробовал это, и это сработало ...
Сначала я взял тег -style- из исходного кадра, а затем добавил его в конец тега -head- второго кадра. Для чего это оказалось полезным ... Как скопировать встроенный элемент стиля в IE?
Затем я создал несколько вложенных элементов div, каждый из которых имеет идентификатор или стиль класс, который мне нужно было унаследовать, чтобы иерархия соответствовала первому кадру. Затем я вставил innerhtml тега исходного кадра, который я хотел скопировать, а затем, наконец, добавил его в тело второго кадра, и волшебным образом все сработало.
var topd = doc.createElement('div'); // make a div that we can attach all our styles to so they'll be inherited
topd.id = 'menuanchorelement';
// shove our desired tag in the middle of a few nested elements that have all the classes we need to inherit...
topd.innerHTML = "<div id='multi-level'><ul class='menu'>" + dh.innerHTML + "</ul></div>";
doc.body.appendChild (topd); // вуаля