这似乎很好奇,但是我在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元素?
提前致谢
答案 0 :(得分:3)
您可以尝试更改此内容:
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属性名称不同。
答案 1 :(得分:1)
您应该在应用类时直接操作元素,例如:
var sample = document.createElement('span');
sample.className = 'sample';
sample.innerHTML = 'hello there';
sample.style.backgroundColor = '#ff25e1';
有趣的是,你不能使用“class”这个词,因为它是JS中的保留词。