JavaScript и стиль копирования
Я копирую ячейку таблицы с помощью JavaScript.
Он отлично работает, просто не копирует стиль. Я хотел скопировать, как показано ниже, но это не сработало. newCell.style =oldCell.style;
Поэтому я решил, что для выравнивания текста мне нужно скопировать его следующим образом: newCell.style.textAlign =oldCell.style.textAlign;
Это сработало, но всякий раз, когда я добавляю новый элемент стиля, я должен помнить, чтобы зарегистрировать его здесь.
Итак, моя проблема сейчас в том, как я могу зациклить стиль и скопировать каждый элемент там?
With chrome, I managed to do it like this:
var strAttribute = GetDomNameFromAttributeName(oRow.cells[1].style[0]);
var styletocopy = eval('oRow.cells[1].style.'+strAttribute);
eval("newCell.style."+strAttribute+"='"+styletocopy+"'"); // //newCell.style.textAlign='center';
But that doesn't work with IE. Haven't tested it with FF, but assume chrome compatibiity.
Is there any way to loop over the style elements in IE? Or is there any better way to copy all style elements?
2 ответа
eval('oRow.cells[1].style.'+strAttribute)
Никогда не используйте eval
как это(*). В JavaScript вы можете получить доступ к свойству, имя которого хранится в строке в квадратных скобках. object.plop
такой же как object['plop']
:
to.style[name]= from.style[name];
(*: никогда не использовать eval
на все, если вы можете помочь. Есть только несколько очень специфических и редких случаев, когда это нужно.)
Есть ли способ зациклить элементы стиля
style
объект должен поддерживать DOM Level 2 CSSCSSStyleDeclaration
интерфейс. Вы можете перебрать правила и применить их к другому элементу, например так:
for (var i= from.style.length; i-->0;) {
var name= from.style[i];
to.style.setProperty(name,
from.style.getPropertyValue(name),
priority= from.style.getPropertyPriority(name)
);
}
в IE?
Нет, IE не поддерживает весь интерфейс CSSStyleDeclaration, и вышеописанное не будет работать. Однако есть более простой способ, не включающий зацикливание, который будет работать и в IE, и в других браузерах:
to.style.cssText= from.style.cssText;
Так просто! IE не совсем сохраняет текст CSS так, как должен, но различие не имеет значения для простого копирования в стиле inline.
Однако, как сказал Пикрасс (+1), если вы копируете целый элемент, а не только стили, cloneNode
безусловно, самый элегантный способ сделать это.
Вы можете скопировать элемент DOM со всем его содержимым (включая атрибуты) с помощью.cloneNode(true):
var clonedTr = document.getElementById('id').cloneNode(true);
Тогда clonedTr является точной копией tr #id. "Истина" означает, что вы хотите скопировать содержимое элемента.
Чтобы скопировать все элементы стиля из одного узла в другой, вы можете использовать
newCell.setAttribute('style', oRow.cells[1].getAttribute('style'))