1.eval(idName)
【問題描述】: IE 、 safari 、 Chrome 瀏覽器下都可以使用 eval(idName) 或 getElementById(idName) 來取得 id 為 idName 的 HTML 對象; firefox 下只能使用 getElementById(idName) 來取得 id 為 idName 的 HTML 對象 .
【兼容辦法】: 統一用 getElementById("idName") 來取得 id 為 idName 的 HTML 對象。
2.ActiveXObject
【問題描述】: IE 下支持用 var obj = new ActiveXObject() 的方式創建對象,但其它瀏覽器都會提示 ActiveXObject 對象未定義。
【兼容辦法】:
(1) 在使用 new ActiveXObject() 之前先判斷瀏覽器是否支持 ActiveXObject 對象,以創建 AJAX 對象為例:
1
if
(window.ActiveXObject)
2
{
3
this
.req=
new
ActiveXObject("Microsoft.XMLHTTP"
);
4
}
5
else
if
(window.XMLHttpRequest)
6
{
7
this
.req=
new
XMLHttpRequest();
8
}
(2) 使用 jQuery 封裝的 ajax 方法來創建對象,以創建 AJAX 對象為例 (推薦) :
1
var
strResponse = ""
;
2
jQuery.ajax({ url: sAspFile, data: "<root>" + sSend + "</root>", processData:
false
, async:
false
, type: "POST"
,
3
error:
function
(XMLHttpRequest, textStatus, errorThrown)
4
{
5
strResponse =
textStatus;
6
},
7
success:
function
(data, textStatus)
8
{
9
strResponse =
data;
10
}
11
});
3.XML 操作
【問題描述】: 通常裝載 xml 文檔使用 ActiveXObject 對象,但除非 IE 外,其它瀏覽器都不支持此方法。 XML 文檔操作, IE 和其它瀏覽器也存在不同,通常取 XML 對象的 XML 文本的方法是 xml.documentElement.xml ,但 xml 屬性只有 IE 支持,其它瀏覽器均不支持。查找節點是常用的方法有 selectNodes 和 selectSingleNode ,這兩個方法也只有 IE 支持,其它瀏覽器需要自己擴展。
【兼容辦法】
(1) 裝載 XML 文檔:用 $.ajax() ,參考 jquery 幫助文檔
(2)xml 對象轉字符串, 如:
1
var
stringtoxml =
function
(str) {
//
字符串轉xml對象
2
var
s = "<?xml version='1.0' encoding='utf-8' ?>" +
str;
3
var
objxml =
null
;
4
if
(window.ActiveXObject) {
5
objxml =
new
ActiveXObject("Microsoft.XMLDOM"
);
6
objxml.async =
false
;
7
objxml.loadXML(s);
8
}
9
else
{
10
objxml = (
new
DOMParser()).parseFromString(s, "text/xml"
);
11
}
12
return
objxml;
13
}
14
15
var
xmltostring =
function
(dom) {
//
xml對象轉字符串
16
if
(dom
instanceof
jQuery) {
17
dom = dom[0
];
18
}
19
var
str =
null
;
20
if
(window.ActiveXObject) {
21
str =
dom.xml;
22
}
23
else
{
24
str = (
new
XMLSerializer()).serializeToString(dom);
25
}
26
return
str;
27
}
28
29
var
oXMLO = stringtoxml("<root>"+ xml +"</root>"
);
30
var
root =
oXMLO.documentElement;
31
var
strXml = xmltostring(root).replace("<root>","");
(3) 字符串轉 xml 對象, 如:
1
var
oXML = stringtoxml("<root>" + document.getElementById("hidTaskXml").value + "</root>");
(4) 查找結點:可以用 JQUERY 同的 find 方法來查找結點,如:
1
var
item = $(oXML).find("record");
或者用原型擴展方法為 XML 對象添加 selectNodes 和 selectSingleNode 方法,擴展方法如下:
if
( document.implementation.hasFeature("XPath", "3.0"
) )
{
XMLDocument.prototype.selectNodes
=
function
(cXPathString, xNode)
{
if
( !
xNode )
{
xNode
=
this
;
}
var
oNSResolver =
this
.createNSResolver(
this
.documentElement);
var
aItems =
this
.evaluate(cXPathString, xNode, oNSResolver,
XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
null
) ;
var
aResult =
[];
for
(
var
i = 0; i < aItems.snapshotLength; i++
)
{
aResult[i]
=
aItems.snapshotItem(i);
}
return
aResult;
}
Element.prototype.selectNodes
=
function
(cXPathString)
{
if
(
this
.ownerDocument.selectNodes)
{
return
this
.ownerDocument.selectNodes(cXPathString,
this
);
}
else
{
throw
"For XML Elements Only"
;
}
}
XMLDocument.prototype.selectSingleNode
=
function
(cXPathString, xNode)
{
if
( !
xNode )
{
xNode
=
this
;
}
var
xItems =
this
.selectNodes(cXPathString, xNode);
if
( xItems.length > 0
)
{
return
xItems[0
];
}
else
{
return
null
;
}
}
Element.prototype.selectSingleNode
=
function
(cXPathString)
{
if
(
this
.ownerDocument.selectSingleNode)
{
return
this
.ownerDocument.selectSingleNode(cXPathString,
this
);
}
else
{
throw
"For XML Elements Only"
;
}
}
}
4.window.execScript()
【問題描述】: 只有 IE 瀏覽器支持 execScript 方法,其它的都不支持。但所有瀏覽器都支持 window.eval() 方法。
【兼容辦法】: 用 window.eval() 方法代替 window.execScript() 。如
1
//
window.execScript(“alert(123)”);
2
3
window.eval(“alert(123)”);
5.window.createPopup()
【問題描述】: 創建一個彈出窗口的方法, IE 支持此方法, Safari 、 FireFox 、 Chrome 都不支持,使用時會提示 createPopup 方法未定義。
【兼容辦法】: 可用如下方法為 window 對象添加 createPopup 方法。
if
(!
window.createPopup) {
var
__createPopup =
function
() {
var
SetElementStyles =
function
( element, styleDict ) {
var
style =
element.style ;
for
(
var
styleName
in
styleDict )style[ styleName ] =
styleDict[ styleName ] ;
}
var
eDiv = document.createElement( 'div'
);
SetElementStyles( eDiv, {
'position': 'absolute', 'top': 0 + 'px', 'left': 0 + 'px', 'width': 0 + 'px', 'height': 0 + 'px', 'zIndex': 1000, 'display' : 'none', 'overflow' : 'hidden'
} ) ;
eDiv.body
=
eDiv ;
var
opened =
false
;
var
setOpened =
function
( b ) {
opened
=
b;
}
var
getOpened =
function
() {
return
opened ;
}
var
getCoordinates =
function
( oElement ) {
var
coordinates = {x:0,y:0
} ;
while
( oElement ) {
coordinates.x
+=
oElement.offsetLeft ;
coordinates.y
+=
oElement.offsetTop ;
oElement
=
oElement.offsetParent ;
}
return
coordinates ;
}
return
{
htmlTxt :
''
,
document : eDiv,
isOpen : getOpened(),
isShow :
false
,
hide :
function
() {
SetElementStyles( eDiv, {
'top': 0 + 'px', 'left': 0 + 'px', 'width': 0 + 'px', 'height': 0 + 'px', 'display' : 'none'
} ) ;
eDiv.innerHTML
= ''
;
this
.isShow =
false
;
},
show :
function
( iX, iY, iWidth, iHeight, oElement ) {
if
(!
getOpened()) {
document.body.appendChild( eDiv ) ; setOpened(
true
) ;
} ;
this
.htmlTxt =
eDiv.innerHTML ;
if
(
this
.isShow) {
this
.hide() ;
} ;
eDiv.innerHTML
=
this
.htmlTxt ;
var
coordinates =
getCoordinates ( oElement ) ;
eDiv.style.top
= ( iX + coordinates.x ) + 'px'
;
eDiv.style.left
= ( iY + coordinates.y ) + 'px'
;
eDiv.style.width
= iWidth + 'px'
;
eDiv.style.height
= iHeight + 'px'
;
eDiv.style.display
= 'block'
;
this
.isShow =
true
;
}
}
}
window.createPopup
=
function
() {
return
__createPopup();
}
}
6.getYear() 方法
【問題描述】: 如下代碼:
1
var
year=
new
Date().getYear();
2
3
document.write(year);
在 IE 中得到的日期是 "2011" ,在 Firefox 中看到的日期是 "111" ,主要是因為在 Firefox 里面 getYear 返回的是 " 當前年份 -1900" 的值。
【兼容辦法】: 解決辦法是加上對年份的判斷,如 :
1
var
year=
new
Date().getYear();
2
year = (year<1900?(1900+
year):year);
3
document.write(year);
也可以通過 getFullYear getUTCFullYear 去調用 :
1
var
year =
new
Date().getFullYear();
2
3
document.write(year);
7.document.all
【問題描述】: document.all 在 IE 、 Safari 下都可以使用, firefox 、 Chrome 下不能使用
【兼容辦法】: 所有以 document.all.* 方法獲取對象的地方都改為 document.getElementById 或 document.getElementsByName 或 document.getElementsByTagName 。
8. 變量名與對象 ID 相同的問題
【問題描述】 :IE 下 ,HTML 對象的 ID 可以作為 document 的下屬對象變量名直接使用,如下面的寫法:
objid.value = “123”;
//
objid為控件ID
其它瀏覽器下則不能這樣寫。原因是其它瀏覽器下 , 可以使用與 HTML 對象 ID 相同的變量名, IE 下則不能。
【兼容辦法】: 使用 document.getElementById(idName) 等通用方法先獲取對象,再操行其它操作。如 :
document.getElementById(objid).value = “123”;
//
objid為控件ID
注: 最好不要取 HTML 對象 ID 相同的變量名 , 以減少錯誤 ; 在聲明變量時 , 一律加上 var, 以避免歧義。
9.select 元素的 add 方法
【問題描述】: 在 IE , Safari , Chrome 下, select 控件添加項時使用如下的方法:
document.getElementById(“select1”).add(
new
Options(“aa”,”aa”));
但在 FireFox 下這樣操作會報錯。
【兼容辦法】: 統一使用兼容方法,加 options 屬性,如下:
document.getElementById(“select1”).options.add(
new
Options(“aa”,”aa”));
10.html 元素的自定義屬性
【問題描述】: IE 下元素屬性訪問方法如 document.getElementById(id). 屬性名,而且對于自定義屬性和非自定義屬性均有效。但在其它瀏覽器下該方法只適應于元素的公共屬性,自定義屬性則取不到。
【兼容辦法】: 用 jQuery 的方法來取,如 $(“#id”).attr(“ 屬性 ”) 或用 document.getElementById(id).getAttribute(“ 屬性 ”), 兩種方法都可以適用所有瀏覽器。
11.html 元素 innerText 屬性
【問題描述】: 取元素文本的屬性 innerText 在 IE 中能正常工作,但此屬性不是 DHTML 標準,其它瀏覽器不支持,其它瀏覽器中使用 textContent 屬性獲取。
【兼容辦法】:
(1) 通用方法是用 jQuery 方法 $(“#id”).text() ,如:
//
document.getElementById(id).innerText;
$(“#id”).text();
(2) 取值前判斷瀏覽器,根據具體情況取值,如:
var
obj =
document.getElementById(id);
var
str = (obj.innerText)?obj.innerText:obj.textContent;
(3) 也可以通過原型擴展方法來為元素添加 innerText ,擴展方法如下:
if
(
typeof
(HTMLElement)!="undefined" && !
window.opera)
{
var
pro =
window.HTMLElement.prototype;
pro.__defineGetter__(
"innerText",
function
(){
var
anyString = ""
;
var
childS =
this
.childNodes;
for
(
var
i=0; i<childS.length; i++
)
{
if
(childS[i].nodeType==1
)
{
anyString
+= childS[i].tagName=="BR" ? '\n'
: childS[i].innerText;
}
else
if
(childS[i].nodeType==3
)
{
anyString
+=
childS[i].nodeValue;
}
}
return
anyString;
});
pro.__defineSetter__(
"innerText",
function
(sText){
this
.textContent=
sText;
});
}
12.html 元素 innerHTML 、 outerHTML 屬性
【問題描述】: innerHTML 是所有瀏覽器都支持的屬性。 outerHTML 屬性不是 DHTML 標準, IE 外的其它瀏覽器不支持。
【兼容辦法】: 在非 IE 瀏覽器下必須使用擴展方法才能獲取,擴展方法如下:
if
(
typeof
(HTMLElement)!="undefined" && !
window.opera)
{
var
pro =
window.HTMLElement.prototype;
pro.__defineGetter__(
"outerHTML",
function
(){
var
str = "<" +
this
.tagName;
var
a =
this
.attributes;
for
(
var
i = 0, len = a.length; i < len; i++
)
{
if
(a[i].specified)
{
str
+= " " + a[i].name + '="' + a[i].value + '"'
;
}
}
if
(!
this
.canHaveChildren)
{
return
str + " />"
;
}
return
str + ">" +
this
.innerHTML + "</" +
this
.tagName + ">"
;
});
pro.__defineSetter__(
"outerHTML",
function
(s){
var
r =
this
.ownerDocument.createRange();
r.setStartBefore(
this
);
var
df =
r.createContextualFragment(s);
this
.parentNode.replaceChild(df,
this
);
return
s;
});
}
13.html 元素 parentElement 屬性
【問題描述】: parentElement 是取元素父結點的屬性,此屬性只有 IE 支持,其它瀏覽器均不支持。
【兼容辦法】: 用 parentNode 屬性來獲取父結點,如:
//
document.getElementById(id).parentElement;
document.getElementById(id).parentNode;
14. 集合類對象問題
【問題描述】: IE 下對于集合類對象,如 forms,frames 等 , 可以使用 () 或 [] 獲取集合類對象, Safari , Chrome 也都支持,如
document.forms(“formid”) 或 document.forms[“formid”]。 但 Firefox 下 , 只能使用 [] 獲取集合類對象。
【兼容辦法】: 統一使用 [] 獲取集合類對象,如:
document.forms[0
];
document.forms[“formid”];
【注】: 所有以數組方式存儲的對象都在訪問子成員時,都必須以 [] 方式索引得到,如常見的 XML 文檔遍歷,也需要改,如下:
//
xmldoc.documentElement.childNodes(1)
xmldoc.documentElement.childNodes[
1]
15.frame 操作
【問題描述】: 在 IE、 Safari 、 Chrome 下,用 window 對象訪問 frame 對象時,可以用 id 和 name 屬性來獲取,如
window.frameId;
window.frameName;
但在 firefox 下,必須使用 frame 對象的 name 屬性才能獲取到。
【兼容辦法】:
(1) 訪問 frame 對象: 統一使用 window.document.getElementById(frameId) 來訪問這個 frame 對象。
(2) 切換 frame 內容: 統一使用 window.document.getElementById(testFrame).src=xxx.htm 切換。
如果需要將 frame 中的參數傳回父窗口,可以在 frame 中使用 parent 來訪問父窗口。例如: parent.document.form1.filename.value=Aqing;
(3)iframe 頁中的對象 : $("#frameid").contents().find("#html 控件 id")
(4)iframe 頁中的 iframe: $("#frameid").contents().find("#frameid1").contents();
(5)iframe 中的方法或變量: $("#frameid")[0] .contentWindow.SaveFile("false", strRet, a);
16.insertAdjacentHTML 和 insertAdjacentText
【問題描述】: insertAdjacentHTML 方法是比 innerHTML 、 outerHTML 屬性更靈活的插入 HTML 代碼的方法。它可以實現在一個 DOM 元素的前面、后面、第一個子元素前面、最后一個子元素后面四個位置,插入指定的 HTML 代碼。不是 W3C 標準的 DOM 方法, W3C 近期在 HTML5 草案中擴展了這個方法。
insertAdjacentText 是比 innerText 、 outerText 屬性更靈活的插入文本的方法。它可以實現在一個 DOM 元素的前面、后面、第一個子元素前面、最后一個子元素后面四個位置,插入指定的文本。不是 W3C 標準的 DOM 方法,至今為止 W3C 的 HTML5 還未涉及此方法。
insertAdjacentHTML 和 insertAdjacentText 可以 IE 、 Safari 、 Chrome 上執行,只有 FireFox 不支持,
【兼容辦法】: 可用以下方法進行擴展:
if
(
typeof
(HTMLElement) != "undefined"
)
{
HTMLElement.prototype.insertAdjacentElement
=
function
(where, parsedNode)
{
switch
(where)
{
case
"beforeBegin"
:
this
.parentNode.insertBefore(parsedNode,
this
);
break
;
case
"afterBegin"
:
this
.insertBefore(parsedNode,
this
.firstChild);
break
;
case
"beforeEnd"
:
this
.appendChild(parsedNode);
break
;
case
"afterEnd"
:
if
(
this
.nextSibling)
this
.parentNode.insertBefore(parsedNode,
this
.nextSibling);
else
this
.parentNode.appendChild(parsedNode);
break
;
}
}
HTMLElement.prototype.insertAdjacentHTML
=
function
(where, htmlStr)
{
var
r =
this
.ownerDocument.createRange();
r.setStartBefore(
this
);
var
parsedHTML =
r.createContextualFragment(htmlStr);
this
.insertAdjacentElement(where, parsedHTML);
}
HTMLElement.prototype.insertAdjacentText
=
function
(where, txtStr)
{
var
parsedText =
document.createTextNode(txtStr);
this
.insertAdjacentElement(where, parsedText);
}
}
17.Html 元素的 children 屬性
【問題描述】: children 是取 HTML 元素子結點的屬性,只有 IE 下支持,其它瀏覽器下用 childNodes 。
【兼容辦法】: 統一改為用 childNodes 屬性取子結點?;蛴靡韵路椒〝U展 HTML 元素的屬性:
if
(
typeof
(HTMLElement) != "undefined"
)
{
HTMLElement.prototype.__defineGetter__(
"children",
function
(){
var
returnValue =
new
Object();
var
number = 0
;
for
(
var
i=0; i<
this
.childNodes.length; i++
)
{
if
(
this
.childNodes[i].nodeType == 1
)
{
returnValue[number]
=
this
.childNodes[i];
number
++
;
}
}
returnValue.length
=
number;
return
returnValue;
})
}
18.insertRow \ inserCell
【問題描述】: insertRow 和 insertCell 是在表格中插入行或插入列的方法,在 IE 中使用方法如下
var
nowTB = document.getElementById("tb1"
);
nowTR
=
nowTB.insertRow();
nowTD
= nowTR.insertCell();
Safari 、 Chrome 下也可以正常執行,但插入行的位置不一樣 IE 下默認在表尾插入行, Safari 、 Chrome 默認在表頭插入行;但在 FireFox 下調用會報錯。
【兼容辦法】: 下面的方法可以在所有瀏覽器上調用,而且插入行的位置都是表尾,不同之處就是執行前傳遞一個默認值。推薦使用。
var
nowTB = document.getElementById("tb1"
);
nowTR
= nowTB.insertRow(-1
);
nowTD
= nowTR.insertCell(-1);
19.document.createElement
【問題描述】: IE 有 3 種方式都可以創建一個元素 :
1 document.createElement("<input type=text>"
)
2 document.createElement("<input>"
)
3 document.createElement("input")
Safari 、 FireFox 、 Chrome 只支持一種方式 :
document.createElement("input"
);
document.setAttribute(name,value);
【兼容辦法】: 統一使用所有瀏覽器都支持的方法,如下:
document.createElement("input"
);
document.setAttribute(name,value);
20. 瀏覽器處理 childNodes 的異同
【問題描述】: 如下 HTML 代碼:
<ul id="main">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<input type=button value="click me!" onclick=
"alert(document.getElementById('main').childNodes.length)">
分別用 IE 和其它瀏覽器運行, IE 的結果是 3 ,而其它則是 7 。
IE 是將一個完整標簽作為一個節點,而 Safari 、 FireFox 、 Chrome 除了上述的的情況外,也把一個標簽的結束符 “>” 到下一個標簽的起始符 “<” 之間的內容(除注釋外,包括任何的文字、空格、回車、制表符)也算是一個節點了,而且這種節點也有它們自己獨特的屬性和值 nodeName="#text" 。
【兼容辦法】: 在實際運用中, Safari 、 FireFox 、 Chrome 在遍歷子節點時,在 for 循環里加上
if(childNode.nodeName=="#text") continue; 或者 nodeType == 1 這樣,便跳過不需要的操作,使程序運行的更有效率。也可以用 node.getElementsByTagName() 回避。
21.document.getElementsByName
【問題描述】: 在元素只有 name 屬性,沒有 id 屬性的情況下,在 IE 中獲取不到 DIV 元素,其它瀏覽器可以獲取。當前 name 和 id 屬性都存在時,所有瀏覽器都可以獲取到 DIV 元素。
【兼容辦法】: 盡量用 ID 來獲取。
22.tr 操作
【問題描述】: IE 下 table 中無論是用 innerHTML 還是 appendChild 插入 <tr> 都沒有效果,因為在 IE 瀏覽器下 tr 是只讀的。而其他瀏覽器下可以這樣操作。
【兼容辦法】: 將 <tr> 加到 table 的 <tbody> 元素中,如下面所示:
var
row = document.createElement("tr"
);
var
cell = document.createElement("td"
);
var
cell_text = document.createTextNode("插入的內容"
);
cell.appendChild(cell_text);
row.appendChild(cell);
document.getElementsByTagName(
"tbody")[0].appendChild(row);
23. 移除節點 removeNode()
【問題描述】: appendNode 在 IE 和其它瀏覽器下都能正常使用,但是 removeNode 只能在 IE 下用。 removeNode 方法的功能是刪除一個節點,語法為 node.removeNode ( false )或者 node.removeNode ( true ),返回值是被刪除的節點。
removeNode ( false )表示僅僅刪除指定節點,然后這個節點的原孩子節點提升為原雙親節點的孩子節點。
removeNode ( true )表示刪除指定節點及其所有下屬節點。被刪除的節點成為了孤立節點,不再具有有孩子節點和雙親節點。
【兼容辦法】: 兼容 IE 和其它瀏覽器的方法是 removeChild ,先回到父節點,在從父節點上移除要移除的節點。
//
為了在IE和其它瀏覽器下都能正常使用,取上一層的父結點,然后remove。
node.parentNode.removeChild(node);
24.expression
【問題描述】: IE 下樣式支持計算表達式 expression ,但其它瀏覽器不支持,而且 IE 以后高版本也可能不再支持這種樣式,所以不允許使用。下面是通常使用的情況:
<div id=
”content”
style
=’height:expression(document.body.offsetHeight-80)”></div>
【兼容辦法】: 去掉樣式設置,將其寫到函數中,分別在頁面加載完畢和頁面尺寸發生變化時執行。如下:
$(
function
(){
$(“#content”).height($(document.body).height()
-80
);
})
$(window).resize(
function
(){
$(“#content”).height($(document.body).height()
-80
);
});
25.Cursor
【問題描述】: Cursor 的 hand 屬性只有 IE 支持,其它瀏覽器沒有效果,如:
<div style=”cursor:hand”></div>
【兼容辦法】: 統一用 pointer 值,如:
<div style=”cursor: pointer”></div>
26.CSS 透明問題
【問題描述】: IE 支持但其它瀏覽器不支持的透明樣式如下:
<div style="filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=20);width:200px;height:200px;background-color:Blue">ddddd</div>
其它瀏覽器支持但 IE 不支持的透明樣式如下:
<div style="opacity:0.2;width:200px;height:200px;background-color:Blue">ddddd</div>
【兼容辦法】: 利用 ”!important” 來設置元素的樣式。 Safari , FireFox , Chrome 對于 ”!important” 會自動優先解析,然而 IE 則會忽略。如下
<div style="filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=20);width:200px;height:200px;background-color:Blue;!important; opacity:0.2">ddddd</div>
27.pixelHeight \ pixelWidth
【問題描述】: pixelHeight \ pixelWidth 是元素的高度和寬度樣式,通常獲取方法是:
obj.style.pixelWidth;
obj.style.pixelHeight;
IE , Safari , Chrome 都支持此樣式,返回的值是整數, FireFox 不支持
【兼容辦法】: 所有瀏覽器都支持 obj.style.height ,但返回的值是帶單位的,如“ 100px ”。可以用如下方法來獲?。?
parseInt(obj.style.height)
28.noWrap
【問題描述】: nowrap 屬性是被廢棄的屬性。
【兼容辦法】: 使用 CSS 規則 white-space:nowrap 代替這個屬性。
29.CSS 的 float 屬性
【問題描述】: Javascript 訪問一個給定 CSS 值的最基本句法是: object.style.property ,但部分 CSS 屬性跟 Javascript 中的保留字命名相同,如 "float" , "for" , "class" 等,不同瀏覽器寫法不同。
在 IE 中這樣寫:
document.getElementById("header").style.styleFloat = "left";
在其它瀏覽器中這樣寫:
document.getElementById("header").style.cssFloat = "left";
【兼容辦法】: 兼容方法是在寫之前加一個判斷,判斷瀏覽器是否是 IE :
if
(jQuery.browser.msie){
document.getElementById(
"header").style.styleFloat = "left"
;
}
else
{
document.getElementById(
"header").style.cssFloat = "left"
;
}
30. 訪問 label 標簽中的 for
【問題描述】: for 屬性規定 label 與哪個表單元素綁定。 在 IE 中這樣寫:
var
myObject = document.getElementById("myLabel"
);
var
myAttribute = myObject.getAttribute("htmlFor");
在 Firefox 中這樣寫:
var
myObject = document.getElementById("myLabel"
);
var
myAttribute = myObject.getAttribute("for");
【兼容辦法】: 判斷瀏覽器是否是 IE :
var
myObject = document.getElementById("myLabel"
);
if
(jQuery.browser.msie){
var
myAttribute = myObject.getAttribute("htmlFor"
);
}
else
{
var
myAttribute = myObject.getAttribute("for"
);
}
31. 訪問和設置 class 屬性
【問題描述】: 同樣由于 class 是 Javascript 保留字的原因,這兩種瀏覽器使用不同的 JavaScript 方法來獲取這個屬性。
IE8.0 之前的所有 IE 版本的寫法:
var
myObject = document.getElementById("header"
);
var
myAttribute = myObject.getAttribute("className");
適用于 IE8.0 以及 firefox 的寫法:
var
myObject = document.getElementById("header"
);
var
myAttribute = myObject.getAttribute("class");
另外,在使用 setAttribute() 設置 Class 屬性的時候,兩種瀏覽器也存在同樣的差異。
setAttribute("className",value); 這種寫法適用于 IE8.0 之前的所有 IE 版本,注意: IE8.0 也不支持 "className" 屬性了。 setAttribute("class",value); 適用于 IE8.0 以及 firefox 。
【兼容辦法】:
1.兩種都寫上:
1
//
設置header的class為classValue
2
var
myObject = document.getElementById("header"
);
3
4
myObject.setAttribute("class","classValue"
);
5
6
myObject.setAttribute("className","classValue");
2. IE 和 FF 都支持 object.className ,所以可以這樣寫:
var
myObject = document.getElementById("header"
);
myObject.className
="classValue";
//
設置header的class為classValue
3.先判斷瀏覽器類型,再根據瀏覽器類型采用對應的寫法。
32. 對象寬高賦值問題
【問題描述】: 非 IE 瀏覽器中中類似 obj.style.height = imgObj.height 的語句無效 , 必須加上 ’px’ 。
【兼容辦法】: 給元素高度寬度附值是,統一都加上 ’px’ ,如:
obj.style.height = imgObj.height + ‘px’;
33.鼠標位置
【問題描述】: IE 下, even 對象有 x 、 y 屬性,但是沒有 pageX 、 pageY 屬性; Firefox 下, even 對象有 pageX 、 pageY 屬性,但是沒有 x 、 y 屬性; Safari 、 Chrome中x 、 y 屬性和 pageX 、 pageY 都有。
【兼容辦法】: 使用 mX = event.x ? event.x : event.pageX; 來代替。復雜點還要考慮絕對位置。
function
getAbsPoint(e){
var
x = e.offsetLeft, y =
e.offsetTop;
while
(e =
e.offsetParent) {
x
+=
e.offsetLeft;
y
+=
e.offsetTop;
}
alert(
"x:" + x + "," + "y:" +
y);
}
34.event.srcElement
【問題描述】: IE 下, event 對象有 srcElement 屬性,但是沒有 target 屬性;其它瀏覽器下, even 對象有 target 屬性,但是沒有 srcElement 屬性。
【兼容辦法】:
var
obj = event.srcElement?event.srcElement:event.target;
35. 關于 <input type="file">
(1) 在 safari 瀏覽器下的此控件沒有文本框,只有一個“選取文件”的按鈕,所有也沒有 onblur 事件,如果在 <input type="file" onblur="alert(0);"> 中用到了需要做特殊處理。
(2) 在 FF 瀏覽器下用 <input type="file" name="file"> 上傳文件后取 file.value 時只能去掉文件名而沒有文件路徑,不能實現預覽的效果,可以用 document.getElementById("pic").files[0].getAsDataURL(); 取到 加密后的路徑,此路徑只有在 FF 下才可以解析。
(3) 在 safari 瀏覽器下用 <input type="file" name="file"> 上傳文件后取 file.value 時只能去掉文件名而沒有文件路徑,不能實現預覽的效果。建議使用上傳后的路徑預覽。
36.jquery對象是否為空
jquery 對象是否為空判斷,用 length 判斷一下
$("#hidTitle").length>0
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061
微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元

