javascript dom注入的元素不拾取css造型在IE中

Question

我有一個奇怪的問題，在JavaScript注入了一些dom元素後，爲這些元素定義的css規則在IE7中不服從（即：造型這些元素不會發生）。 （Firefox和Chrome做工精細，其他未測試）

事情我想： - 清除緩存 - 沒有其他的CSS規則優先（沒有「更具體的」風格等）

的JS（體內）（我用的原型爲這裏注入，但我不認爲它相關的）（關於JS：一些JSONP弄虛作假將照片添加到基於緯度/經度一個div）

<script type="text/javascript"> 
    function ws_results(json) { 
     var div = document.createElement('div'); 
     div.setAttribute('class', 'pano_img_cont'); 
     var paras = $A(json.photos); 
     paras.each(function(para){ 
       var img = document.createElement('img'); 
       img.setAttribute('src', para.photo_file_url); 
       div.appendChild(img); 
     }); 
     var cc = $('panaramio_anchor'); 
     Element.insert(cc.up(),{top:div}); 
    } 
    </script> 
    <script src="http://www.panoramio.com/map/get_panoramas.php?order=popularity&amp;set=public&amp;from=0&amp;to=15&amp;minx=13.375&amp;miny=52.4917&amp;maxx=13.424999&amp;maxy=52.541702&amp;size=square&amp;callback=ws_results" type="text/javascript"></script> 

CSS（當然，作爲ie.css中的最後一個樣式添加）

.pano_img_cont{ 
    display:block; 
    float:left; 
    position:relative; 
    width:100%;  
    margin-left:6px;  
    margin-top:3px; 
    padding-right:5px; 
    margin-bottom:-18px; 
    white-space:normal; 
    padding:10px; 
    background:#f00; 
} 

.pano_img_cont img{ 
    display:inline-block; 
    width:67px; 
    height:55px; 
    margin:0 3px 5px 3px; 
    background:#eee; 
    float:left; 
} 

任何人都知道這是怎麼回事？ 或許css不會在dom自動更新後重新運行css-styling？嗯，只是猜測在這裏..

謝謝。

Answer 1

的setAttribute在IE7和較低的斷裂。

使用

div.className = 'pano_img_cont' 

代替。

---

IE的實現的setAttribute的實際上是：

HTMLElement.prototype.setAttribute = function (attribute, value) { 
    this[attribute] = value; 
} 

...這是很好的，只要屬性名稱和DOM屬性名相同。但是，class是JS中的保留關鍵字，因此該屬性被稱爲className。這在IE中斷了。

如果您直接設置屬性，它可以在任何地方使用。

Answer 2

不要使用的setAttribute，使用jQuery的addClass方法：

http://api.jquery.com/addClass/