【卜維丰】setAttribute() 的瀏覽器支援

有關 setAttribute() 各種瀏覽器支援的問題

setAttribute(), getAttribute(), removeAttribute() 是相關連的一組 Javascript 處理各標籤屬性的語法，透過這三個指令，可以動態為 HTML 標籤加上屬性，這些屬性，通常都是無法使用 DOM 模式來控制，例如：

要修改某個標籤的樣式，可以使用：

htmlOBJ.className=newStyleName

透過 className 方法，指定新的樣式到指定了 ID 的標籤中，這沒有太大問題。但如果是

<p> 變成 <p align="center"> 呢？在不指定樣式的情況下，又要如何辦到？

這時就可以使用 setAttribute() 來完成，語法是：

setAttribute(屬性名稱, 值)

例如：

getElementById('id').setAttribute('aling','center');

但是，問題來了，不一定有用！怎麼說，老問題，瀏覽器支援的問題，看看這個例子：

請按這裡，把第二列表格兩格合併。

用 IE 的請按這裡，把第二列表格兩格合併。

如果你按下連結後，沒有效果，相信你使用的是 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程式碼};還不行?找比爾的蓋子吧

前陣子在作一個動態增加表格時，遇到沒法合併儲存格的問題，才研究了一下，這裡提供參考。

同意轉載，不過麻煩看一下轉載需知

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'
好像沒反應吔

給個回應

姓名:
佈落格網址:
	如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容:

以下為本站文章分類清單

以下為本站側欄內容

以下為最近發表的文章

以下為本頁本文內容

有關 setAttribute() 各種瀏覽器支援的問題

以下為文章回應區