Блог

Главная - Вопросы по программированию - JS не может установить свойство стиля

JS не может установить свойство стиля

#javascript #html #jquery #css

Вопрос:

Хорошо, давайте посмотрим на эту часть кода —

 $(tbody).find('tr').each((i, oldTbodyTr) => {
    newTr = document.createElement('tr');
    $(oldTbodyTr).find('td').each((i, oldTd) => {
        let newTd = document.createElement('td');
        newTd.innerHTML = oldTd.innerHTML;
        newTd.classList = oldTd.classList;
        newTd.style = oldTd.style; //Doesn't work
        newTr.appendChild(newTd);
    });
    newTableTbody.appendChild(newTr);
});

Он создает новое тело таблицы, перебирая все строки в tbody уже существующей таблице.
Все в порядке, за исключением того, что стиль старого td элемента не переносится на новый td элемент.
Я не могу понять, почему.

Комментарии:

1. Почему бы просто не определить свои стили в CSS и не назначить класс? Сколько свойств стиля вы определили? Вам нужно будет передавать их один за другим.

2. Дело не в моих стилях. На самом деле я пишу функцию, чтобы захватить простую таблицу и предоставить полнофункциональную и красивую. Что-то вроде таблиц данных. Оно должно быть универсальным.

3. Есть ли какие-либо встроенные стили, которые вы хотите скопировать?

4. Да, мне нужно, чтобы все стили из старого td были скопированы в новый td. Весь объект. Как упоминал Себастьян, style — это свойство, доступное только для чтения. Поэтому мне интересно, как перенести все это.

5. @OP, вы рассматривали возможность простого использования newTableTbody.append(tbody.cloneNode(true)) для вашего случая?

Ответ №1:

Если вы хотите скопировать встроенные стили, вы можете попробовать newTd.style.cssText = oldTd.style.cssText , поскольку style сам по себе является неизменяемым.

Подробнее см. style.cssText здесь .

 const source = document.getElementById('source');
const target = document.getElementById('target');

target.style.cssText = source.style.cssText; 
 <p id="source" style="color: red; background-color: blue; font-size: 20px;">Source</p>
<p id="target">Target</p>

Комментарии:

1. HTMLElement.style есть PutForwards=cssText , так что делать elem.style = foo — это точно то же самое , что и делать elem.style.cssText = foo . Если код OP не сработал, это потому elem.style.toString() , что will возвращает "[object CSSStyleDeclaration]" (или "[object CSS2Properties]" в FF), а не предполагаемый cssText. Так что они вполне могут просто написать target.style = source.style.cssText;

Метки: