IE7 - 样式Javascript生成的元素

时间:2010-08-19 10:45:18

标签: javascript css dynamic stylesheet element

这似乎很好奇,但是我在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元素?

提前致谢

2 个答案:

答案 0 :(得分:3)

您可以尝试更改此内容:

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

到此:

sample.className = 'sample';

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

答案 1 :(得分:1)

您应该在应用类时直接操作元素,例如:

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

sample.style.backgroundColor = '#ff25e1';

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