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元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
