- window.event
- IE：有window.event對象
- FF：沒有window.event對象。可以通過給函數的參數傳遞event對象。如οnmοusemοve=doMouseMove(event)
- 解決：var evt = evt ? evt : (window.event ? window.event : null);
- 鼠標當前座標
- IE：event.x和event.y。
- FF：event.pageX和event.pageY。
- 通用：兩者都有event.clientX和event.clientY屬性。
- 解決：var mX = event.x ? event.x : event.pageX;
- event.srcElement問題
- 返回觸發此事件的元素:var element=(evt.target)?evt.target:evt.srcElement;
- 鼠標當前座標(加上滾動條滾過的距離)
- IE：event.offsetX和event.offsetY。
- FF：event.layerX和event.layerY。
- 標籤的x和y的座標位置：style.posLeft 和 style.posTop
- IE：有。
- FF：沒有。
- 通用：object.offsetLeft 和 object.offsetTop。
- 窗體的高度和寬度
- IE：document.body.offsetWidth和document.body.offsetHeight。注意：此時頁面一定要有body標籤。
- FF：window.innerWidth和window.innerHegiht，以及document.documentElement.clientWidth和document.documentElement.clientHeight。
- 通用：document.body.clientWidth和document.body.clientHeightBODY對象寬度|高度。
document.documentElement.clientWidthdocument.documentElement.clientHeight可見區域寬度|高度
- 添加事件
- IE：element.attachEvent("onclick", func);。
- FF：element.addEventListener("click", func, true)。
- 通用：element.οnclick=func。雖然都可以使用onclick事件，但是onclick和上面兩種方法的效果是不一樣的，onclick只有執行一個過程，而attachEvent和addEventListener執行的是一個過程列表，也就是多個過程。例如：element.attachEvent("onclick", func1);element.attachEvent("onclick", func2)這樣func1和func2都會被執行。
- 標籤的自定義屬性
- IE：如果給標籤div1定義了一個屬性value，可以div1.value和div1["value"]取得該值。
- FF：不能用div1.value和div1["value"]取。
- 通用：div1.getAttribute("value")。添加則爲：
- 父節點、子節點和刪除節點
- IE：parentElement、parement.children，element.romoveNode(true)。
- FF：parentNode、parentNode.childNodes，node.parentNode.removeChild(node)。
- 畫圖
- CSS：透明
- IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
- FF：opacity:0.6。
- CSS：圓角
- IE：不支持圓角。
- FF：-moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius-bottomright:4px;。
- CSS：雙線凹凸邊框
- IE：border:2px outset;。
- FF：-moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;。
- CSS：float
- IE：obj.style.setAttribute("styleFloat","left")|obj.style.styleFloat="left"。
- FF：obj.style.setAttribute("cssFloat","left")|obj.style.cssFloat="left"。
- 通用：obj.style.cssText="float:left;"
- 關於class和className
- IE：element.setAttribute("className", vName); //for IE
- FF：element.setAttribute("class", vName);
- 通用：obj.style.className =vName;"
- 增加一個指定名稱和值的新屬性，或者把一個現有的屬性設定爲指定的值
- FF：element.setAttribute("onclick", "javascript:alert('This is a test!');");
- IE：IE並不是不支持setAttribute這個函數，而是不支持用setAttribute設置某些屬性，例如對象屬性、集合屬性、事件屬性，也就是說用setAttribute設置style和onclick這些屬性
在IE中是行不通的。
- 爲達到兼容各種瀏覽器的效果，可以用點符號法來設置Element的對象屬性、集合屬性和事件屬性。
element.className = "fruit";
element.style.cssText = "color: #00f;";
element.style.color = "#00f";
element.οnclick= function () { alert("This is a test!");
- input.type屬性問題
- IE下input.type屬性爲只讀;但是Firefox下input.type屬性爲讀寫. 5
- 模態和非模態窗口問題
- innerText
- IE：element.innerText = "my text";
- FF：element.textContent = "my text";
- 集合類對象問題
- 說明：IE下,可以使用()或[]獲取集合類對象;Firefox下,只能使用[]獲取集合類對象.
- 解決：統一使用[]獲取集合類對象.
- frame問題
-
body問題
- FF：body在body標籤沒有被瀏覽器完全讀入之前就存在
- IE：body則必須在body標籤被瀏覽器完全讀入之後才存在.
- document.form.item 問題
- 現有問題：
現有代碼中存在許多 document.formName.item(”itemName”) 這樣的語句，不能在 MF 下運行
- 解決方法：
改用 document.formName.elements[”elementName”]
- createElement的問題
- FF： 不支持document.createElement("<input type='button' value=' 開始 ' />")
- 解決：var element=document.createElement("input");element.type="'button'";parentNode.appendChild(element);
- 注意：針對 input 在 IE 中 type 屬性必須在前，其它屬性必須在後;
- insertBefore的問題
- IE：parentNode.insertBefore(element,oChildNode);可將oChildNode省略
- FF:不能省略
|
