2010年8月5日

東方淫獸行之 setAttribute

東方淫獸行目前使用 setAttribute 來設定屬性
IE 使用 setAttribute 在某些屬性時會出錯
例如 style、class、onclick
淫獸行中惟二用到的剛好都在例子裡
style 與 onclick


首先找能讓 IE 改變 style 的方法

根據資料
Object.style.backgroundPosition

設置背景圖像的起始位置
[IE 4] [F No] [O No] [W3C Yes]

火狐要能使用必須將 background-attachment 設為 fixed
但 fixed 的基準點的標準(?)是在整個視窗的左上
這不是我所要的
後來搞了半天
發現最新的火狐已經沒這問題了...

整理一下就是:
Object.setAttribute("style","background-position: -32px -32px");
Object.style.backgroundPosition = "-32px -32px";
對 FF 是兩式等價
而 IE 只能用下式
下式似乎是較標準的作法


再來淫獸行中還有用到 onclick
Object.setAttribute("onclick","stop()");
Object.onclick = function () {stop()};
對 FF 是兩式等價
而 IE 只能用下式
下式似乎是較標準的作法

0817新增:
如果函數不需參數可以用這種寫法
Object.onclick = stop;

0825新增:
以下是實作「拖曳 div 標籤」過程中找到的資料
event 原來蠻複雜的

使用多個函數:
Object.onclick = function () {stopA(); stopB(); stopC()};

1112新增:
onclick 基本上屬於一種函數
假如有個函數叫做 stop
可以這樣寫
Object.onclick = stop
以 onclick 為例
想想當你"點擊"時能給 stop函數 什麼值?

所有能給的值都包裝在Event 物件裡了
要能使用Event 物件中的「滑鼠 / 鍵盤屬性」等等的"屬性"與"方法"
就要能在不同瀏覽器抓到正確的 Event 物件
但 FF 跟 IE 獲取Event 物件的方法不同
IE 中是一個全域變數:window.event
FF 則需要參數引導,方法如下:
Object.onclick = function (x) {  注釋:FF 會將 Event 物件傳給變數 x
       var e = x || window.event};
注釋:FF 將 Event 物件再傳給變數 e
   如果是 IE,x 為 undefined
   則將 window.event (即 IE 正確的 Event 物件)傳給變數 e

注意!在 FF 中此函數最多設定一個參數,而且參數值一定是(或是說只能)接收 Event 物件
每種事件所能給的值不盡相同
所以都封裝在Event 物件裡
參考資料

另外在標籤中要獲取 Event 對象可以這樣寫:
<div onclick="stop(event)">
(在標籤中的 event 算是內定變數?)
配合你的函數這樣寫:stop(x)
這樣FF 與 IE 各會將正確的 Event 對象傳給變數 x
這種方法最方便
但有 HTML 與 JavaScript 分工上的潔癖問題

總之趕快學完 jQuery 吧
jQuery 會幫你完成上面那些鳥事


這個我沒試過
Object.setAttribute(class, "文本");
Object.setAttribute(className, "文本");
根據資料
FF 只能用上式
IE 只能用下式

0814新增:
Object.className = "文本"
根據測試 FF、IE 皆可使用


另外~
這次還遇到一些雞巴毛的事情
FF 中<div onclick="run()" id="run">
同名似乎會出錯,IE 懶得試了

第二個是 function start()
函數不能為 start (全小寫)
這個只有 IE 會出錯


現在淫獸行已經能在 IE8 運作了
真的是搞了一整天呢
呼呼呼
最後剩下的問題就是 IE8 中按鈕大小不一 ~~


0822新增:
這個網頁有其他例子
audi.tw/Blog/JavaScript/javascript.setAttribute.asp

沒有留言:

張貼留言

Likey
創用 CC 授權條款