JS 无法设置样式属性

Posted 2023-05-08

【中文标题】JS 无法设置样式属性

【英文标题】：JS can't set style property

【发布时间】：2022-01-06 21:26:18

【问题描述】：

好的，我们来看这部分代码-

$(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 元素上。 我不知道为什么。

【问题讨论】：

为什么不简单地在 CSS 中定义样式并分配一个类？您定义了多少样式属性？你需要一个一个地转移它们。

这与我的风格无关。实际上，我正在编写一个函数来获取一个简单的表格并提供一个功能齐全且漂亮的表格。像数据表这样的东西。它必须是通用的。

是否有要复制的内联样式？

是的，我需要将旧 td 中的所有样式复制到新 td。整个对象。正如塞巴斯蒂安所说，样式是只读属性。所以我想知道如何转移所有这些。

@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>

【讨论】：

HTMLElement.style 是PutForwards=cssText，所以elem.style = foo 与elem.style.cssText = foo 完全相同。如果 OP 的代码不起作用，那是因为 elem.style.toString() 将返回 "[object CSSStyleDeclaration]"（或 FF 中的 "[object CSS2Properties]"）而不是预期的 cssText。所以他们可以很好地写target.style = source.style.cssText;