Question

请查看以下代码：

＆＃13;

let elStyle = document.createElement('style');
elStyle.type = 'text/css';
elStyle.title = "dynamic";
elStyle.innerHTML = ".testclass{padding: 50px;}";
document.head.appendChild(elStyle);

elStyle = document.createElement('style');
elStyle.type = 'text/css';
elStyle.title = "dynamic2";
elStyle.innerHTML = ".testclass2{margin: 50px;}";
document.head.appendChild(elStyle);

let divel = document.createElement('div');
document.body.appendChild(divel);
divel.classList.add('testclass');
divel.classList.add('testclass2');

＆＃13;

它会动态创建两个不同的<style>元素并将它们附加到dom的头部。之后，动态创建<div>元素并附加到dom的主体。然后我们将div元素分别包含在动态添加的样式元素中。

在Chrome和Firefox中，如果你检查div元素，你会发现只应用了第一个类（testclass）的CSS（在我们的例子中是padding: 50px;）。在MSEdge中，这两个课程都是＆＃39; CSS已正确应用。

这是Chrome / FF的预期行为还是错误？

Answer 1

这与动态添加的元素无关。

你已经给出了样式元素title s，它们将它们标记为alternative stylesheets，不应该一起使用。

如果删除title属性，则两者均适用。

let elStyle = document.createElement('style');
elStyle.type = 'text/css';
elStyle.innerHTML = ".testclass{padding: 50px;}";
document.head.appendChild(elStyle);

elStyle = document.createElement('style');
elStyle.type = 'text/css';
elStyle.innerHTML = ".testclass2{margin: 50px;}";
document.head.appendChild(elStyle);

let divel = document.createElement('div');
document.body.appendChild(divel);
divel.classList.add('testclass');
divel.classList.add('testclass2');

浏览器仅从第一个动态添加的样式元素应用css

1 个答案: