以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

有關 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程式碼};還不行?找比爾的蓋子吧

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

以下為文章回應區

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

foot pain bottom   2017/6/24 下午 07:13:00

This is the right blog for anyone who would like to find out
about this topic. You know a whole lot its almost tough to argue with you (not that I really will need to?HaHa).
You definitely put a new spin on a topic which has been discussed for many years.
Great stuff, just excellent!

http://maddivolere.hatenablog.com/   2017/6/12 下午 02:09:00

Having read this I thought it was rather enlightening. I appreciate you spending
some time and energy to put this content together.
I once again find myself personally spending way too much time
both reading and posting comments. But so what, it was still worth it!

http://ellenfriese.jimdo.com   2017/6/11 上午 05:23:00

We are a gaggle of volunteers and starting a new scheme in our community.
Your site offered us with useful information to work on. You've done a formidable
task and our entire group will probably be grateful to you.

manicure   2017/5/3 下午 08:58:00

Today, I went to the beach with my children. I found a sea shell and gave it
to my 4 year old daughter and said "You can hear the ocean if you put this to your ear." She put the
shell to her ear and screamed. There was a hermit crab inside and it pinched her ear.
She never wants to go back! LoL I know this is completely off topic but I had to tell someone!

BHW   2017/4/13 下午 08:07:00

Usually I don't learn post on blogs, however I wish to say that this
write-up very compelled me to take a look at and do it!
Your writing style has been surprised me. Thank
you, quite nice article.

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

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