IE7 - 樣式Javascript生成的元素

這似乎很好奇，但我有問題的應用樣式的JavaScript生成的元素在IE7中，但如果我呈現相同的元素作爲字符串它的工作。IE7 - 樣式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; 
}

，然後在頁面我添加一個

在我的javascript

.sample跨度機體：

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

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

當IE8/FF/Safari瀏覽器/中心渲染歐梅等等，它呈現與紅色背景相當好，出人意料地在IE7上它不顯示紅色背景。如果我將sample元素轉換爲字符串，然後將其添加到主體，但它會失去所有對該元素的引用，這是不好的。

所以問題是：如何正確地將樣式應用於JavaScript元素？

在此先感謝

來源

2010-08-19 zanona

你能嘗試修改此：

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

這樣：

sample.className = 'sample';

安迪鄂中的意見在IE 7中提及，並降低setAttribute()盲目地圖您提供給屬性名稱的屬性（例如，它將sample.setAttribute('class', 'sample')映射到sample.class = 'sample'），因此它的屬性如class，for，onload,onclick等，其中HTML屬性名稱與JavaScript屬性名稱不同。

來源

2010-08-19 10:49:32

儘管'setAttribute'在添加樣式表時似乎適用於您，所以這可能不是它... – 2010-08-19 10:50:53

Paul，令人驚訝的是它的工作！看起來''class'關鍵字確實有一個問題。非常感謝 – zanona 2010-08-19 11:08:09

+1。 * setAttribute（）*錯誤地映射到IE7和更低版本的屬性名稱，所以它打破了相當的屬性，如* class *，* for *，* onload *，* onclick *等。 – 2010-08-19 11:11:29

您應該直接應用類時，有趣的操作元素，例如：

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

sample.style.backgroundColor = '#ff25e1';

，你不能用這個詞，「階級」，因爲它是JS的保留字。

來源

2010-08-19 10:52:11 Andrew

但'class''作爲一個字符串不是一個保留的關鍵字，所以這應該不重要。 – peirix 2010-08-19 10:54:17

你說得對。你可以使用'setAttribute（）'任何你想要的方式。同樣，你也可以寫'sample ['class'] ='sample';'，儘管它和setAttribute（）具有相同的結果。但是對於直接賦值，你不能寫'sample.class ='sample';'。這就是我的意思。 – Andrew 2010-08-19 12:53:20

IE7 - 樣式Javascript生成的元素

回答

相關問題