Question

这似乎很好奇，但是我在IE7中为javascript生成的元素应用样式时遇到了问题，但是如果我渲染与字符串相同的元素，它确实有用。

在我的javascript上：

var style = document.createElement('link');
    style.setAttribute('type','text/css');
    style.setAttribute('rel', 'stylesheet');
    style.setAttribute('href', url('assets/default.css'));

document.getElementsByTagName('head')[0].appendChild(style);

这将创建我喜欢嵌入页面的脚本标记，其中包含：

.sample{
  background: red;
}

然后对于页面我正在向正文添加.sample范围：

var sample = document.createElement('span');
    sample.setAttribute('class','sample');
    sample.innerHTML = 'hello there';

document.getElementsByTagName('body')[0].appendChild(sample);

在IE8 / FF / Safari / Chrome等渲染时，它在红色背景下呈现得非常好，令人惊讶的是在IE7上它不显示红色背景。如果我将sample元素转换为字符串然后将其添加到正文中，然后我丢失了对该元素的所有引用，这是不行的。这不是好事。

所以问题是：如何正确地将样式应用于javascript元素？

提前致谢

Answer 1

您可以尝试更改此内容：

sample.setAttribute('class','sample');

到此：

sample.className = 'sample';

正如Andy E在评论中提到的，在IE 7及更低setAttribute()中，盲目地将您提供的属性映射到属性名称（例如，它将sample.setAttribute('class', 'sample')映射到sample.class = 'sample'），所以它中断了class，for，onload，onclick等属性，其中HTML属性名称与JavaScript属性名称不同。

Answer 2

您应该在应用类时直接操作元素，例如：

var sample = document.createElement('span');
sample.className = 'sample';
sample.innerHTML = 'hello there';

sample.style.backgroundColor = '#ff25e1';

有趣的是，你不能使用“class”这个词，因为它是JS中的保留词。

IE7 - 样式Javascript生成的元素

2 个答案: