setAttribute(), getAttribute(), removeAttribute() 是相關連的一組 Javascript 處理各標籤屬性的語法,透過這三個指令,可以動態為 HTML 標籤加上屬性,這些屬性,通常都是無法使用 DOM 模式來控制,例如:
要修改某個標籤的樣式,可以使用:
htmlOBJ.className=newStyleName
透過 className 方法,指定新的樣式到指定了 ID 的標籤中,這沒有太大問題。但如果是
<p> 變成 <p align="center"> 呢?在不指定樣式的情況下,又要如何辦到?
這時就可以使用 setAttribute() 來完成,語法是:
setAttribute(屬性名稱, 值)
例如:
getElementById('id').setAttribute('aling','center');
但是,問題來了,不一定有用!怎麼說,老問題,瀏覽器支援的問題,看看這個例子:
如果你按下連結後,沒有效果,相信你使用的是 IE,改用FireFox 時,第二列就可以順利合併成一格。
這個方法,在動態增加表格列時,尤其有用,但 IE 是不是真的不行呢?看看動作原始碼,這個例子,第二列命名為 rowB,程式碼如下:
<a href="javascript://:" onClick="document.getElementById('rowB').setAttribute('colspan',2);">請按這裡,把第二列表格兩格合併。</a> |
setAttribute('colspan',2) 相當於是 <td colspan="2"> 這個語法,在 IE 失效,原因很簡單,IE 看不懂 colspan 是什麼!
也不用太絕望,把 colspan 改成 colSpan ,IE 就看懂了,下表列出支援項目:
屬性 | Mozilla | NS/FireFox | IE |
---|---|---|---|
align | V | V |
PC 上沒問題,Mac 上有問題 |
bgColor | V | V | 注意C要大寫,IE 就沒問題 |
colSpan | V | V | 注意S要大寫,IE就沒問題 |
style | V | V | 沒反應 |
width | V | NS7以上,FireFox都沒問題 | PC 上沒問題,Mac 上有問題 |
onmouseover | V | NS7以上,FireFox都沒問題 | 如果使用 setAttribute('onmouseover','alert('hello')'); 沒反應的話, 就改成setAttribute('onmouseover','function funName(){alert('hello');}'); 如果還沒反應的話,改成obj.onmouseover=function(){Javascript程式碼};還不行?找比爾的蓋子吧 |
前陣子在作一個動態增加表格時,遇到沒法合併儲存格的問題,才研究了一下,這裡提供參考。
同意轉載,不過麻煩看一下轉載需知
SPW 2010/10/18 下午 03:32:00
謝謝 解決了我的問題
補充一點
document.getElementById("ID").setAttribute("STYLE","display:none");
STYLE 改成大寫 IE 就讀懂囉
lulu 2010/7/25 下午 08:29:00
謝謝...
frank 2010/6/10 上午 12:34:00
感謝你的分享,解決我試了一個晚上的痛苦
Richer 2009/5/11 下午 05:06:00
看到你的文章,解決了我的問題.謝謝
卜維丰 2008/5/18 下午 10:04:00
所謂 setAttribute() 第三個參數, 事實上是因為 IE 無法符合 DOM Level 2 規範, 並且為了向下相容, 而發展出來的參數
參閱 MSDN 說明
DOM Level2 的 setAttribute() 說明
你的問題, 我會建議你, 只建立 div , 然後用 div 的 innerHTML 去加入 iframe, 因為動態增加 iframe , 和節點間的關係就遠了, 就犯不著堅持用 createElement 去建立 iframe
向下相容是 IE 極大的包袱, IE8 原本計劃要很符合 W3C 規範, 現在連 IEBlog 也很無奈的說為了向下相容, 不知未來會推出什麼東西
Space 不登錄不給回應, 就在這裡回應, 希望你有看到
roviury 2008/5/18 下午 06:44:00
setAttribute中是有第3個屬性的
(一直被忽略-.-)
只要把第3個屬性設為0,就能區分大小寫
DOM模型的輸出模式寫法不同,
在IE下的DOM屬性會是大寫,
而IE只讀大寫,自然排除裡頭的小寫Attribute!
因此,必須設定區分大小寫的屬性,讓IE正確讀取屬性,方法如下:
iframe.setAttribute('frameborder','0',0);
只要在最後面再加一個"0",就可以區分大小寫。
(http://bradkuo.spaces.live.com/blog/cns!BCED278316CF5F98!2881.entry)
卜維丰 2008/5/8 上午 10:44:00
SLK, 這我沒試過
一般, 如果我真要加入 iframe 時, 我的習慣是加在 div 裡
所以一定是 div.innerHTML 來加 iframe
因為一旦使用了 iframe 所需的是 window 物件, 和節點關係比較不大
SLK 2008/5/8 上午 10:18:00
firefox2也不行耶 @@
卜維丰 2008/4/19 下午 11:06:00
leon456, 你講的這兩個屬性,IE都不支援,所以搞不出來^^
leon456 2008/4/11 下午 05:14:00
iframe 的 frameborder='0' scrolling='no'
好像沒反應吔