网站地图
【www.gdgbn.com--浏览器】
1. css教程 “float” 值
访问一个给定css教程 值的最基本句法是：object.style.property，使用驼峰写法来替换有连接符的值，例如，访问某个id为”header”的的 background-color值，我们使用如下句法：
document.getelementbyid("header").style.backgroundcolor= "#ccc";
但由于”float“这个词是一个javascript教程保留字，因此我们不能用 object.style.float来访问，这里，我们可以在两种浏览器中这么做：
在ie中这样写：
document.getelementbyid("header").style.stylefloat = "left";
在firefox中这样写：
document.getelementbyid("header").style.cssfloat = "left";
2. 元素的推算样式
javascript教程可以使用object.style.property句法，方便地在外部访问和修改某个css样式，但其限制是这些句法只能取出已设的行内样式或者直接由javascript设定的样式。并不能访问某个外部的样式表。为了访问元素的”推算”样式，我们可以使用下面的代码：
在ie中这样写：
var myobject = document.getelementbyid("header");
var mystyle = myobject.currentstyle.backgroundcolor;
在firefox中这样写：
var myobject = document.getelementbyid("header");
var mycomputedstyle = document.defaultview.getcomputedstyle(myobject, null);
var mystyle = mycomputedstyle.backgroundcolor;
3. 访问元素的”class”
像”float“一样，”class“是javascript的一个保留字，在这两个浏览器中我们使用如下句法来访问”class”。
在ie中这样写：
var myobject = document.getelementbyid("header");
var myattribute = myobject.getattribute("classname");
在firefox中这样写：
var myobject = document.getelementbyid("header");
var myattribute = myobject.getattribute("class");
this syntax would also apply using the setattribute method.
4. 访问
var myobject = document.getelementbyid("mylabel");
var myattribute = myobject.getattribute("htmlfor");
在firefox中这样写：
var = document.getelementbyid("mylabel");
var myattribute = myobject.getattribute("for");
5. 获取鼠标指针的位置
计算出鼠标指针的位置对你来说可能是非常少见的，不过当你需要的时候，在ie和firefox中的句法是不同的。这里所写出的代码将是最最基本的，也可能是某个复杂事件处理中的某一个部分。但他们可以解释其中的异同点。同时，必须指出的是结果相对于firefox，ie会有更在的不同，这种方法本身就是有bug的。通常，这种不同可以用”拖动位置”来得到补偿，但，那是另外一个主题的文章了: ) !
在ie中这样写：
var mycursorposition = [0, 0];
mycursorposition[0] = event.clientx;
mycursorposition[1] = event.clienty;
在firefox中这样写：
var mycursorposition = [0, 0];
mycursorposition[0] = event.pagex;
mycursorposition[1] = event.pagey;
6. 获取可见区域、窗口的大小
有时，我们会需要找到浏览器的可视位置的大小，通常我们称之为”可见区域”。
在ie中这样写：
var mybrowsersize = [0, 0];
mybrowsersize[0] = document.documentelement.clientwidth;
mybrowsersize[1] = document.documentelement.clientheight;
在firefox中这样写：
var mybrowsersize = [0, 0];
mybrowsersize[0] = window.innerwidth;
mybrowsersize[1] = window.innerheight;
7. alpha 透明
好吧，这并不是一个javascript句法问题，而是源自于css的alpha透明。但当某个物体需要淡入/出则需要javascript来表现，这是通过访问css的alpha透明设置来完成的，通常在一个循环中完成。你需要通过来修改的javascript的代码如下：
在ie中这样写：
#myelement { filter: alpha(opacity=50); }
在firefox中这样写：
#myelement { opacity: 0.5; }
在ie中这样写：
var myobject = document.getelementbyid("myelement");
myobject.style.filter = "alpha(opacity=80)";
在firefox中这样写：
var myobject = document.getelementbyid("myelement"); myobject.style.opacity = "0.5";
还有什么不同的吗?
=========
window.event对象差异
ie：有window.event对象
ff：没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=domousemove(event)
获取鼠标当前坐标
ie：event.x和event.y。
ff：event.pagex和event.pagey。
通用：两者都有event.clientx和event.clienty属性。
鼠标当前坐标(加上滚动条滚过的距离)
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.clientheight。
添加事件
ie：element.attachevent(”onclick”, func);。
ff：element.addeventlistener(”click”, func, true)。
通用：element.onclick=func。虽然都可以使用onclick事件，但是onclick和上面两种方法的效果是不一样的，onclick只有执行一个过程，而attachevent和addeventlistener执行的是一个过程列表，也就是多个过程。例如：element.attachevent(”onclick”, func1);element.attachevent(”onclick”, func2)这样func1和func2都会被执行。
在这里断桥残雪，曾经写过一个通用的添加删除绑定事件的函数，大家可以查看以下文章：《javascript跨浏览器的添加删除事件绑定函数》
标签的自定义属性
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)。
clientx,pagex,offsetx,x,layerx,screenx,offsetleft
screenx:鼠标在显示屏幕上的坐标。
clientx:鼠标在页面显示区域的坐标。
注：以上两个都是各浏览器通用的。以下为特有方法：
pagex:ff特有，鼠标在页面上的位置，从页面左上角开始定位，这个可以很方便在整个页面上进行定位，ie没有直接替换的属性。
layerx:ff特有，鼠标相对于“触发事件的元素的层级关系中离该元素最近的，设置了position的父元素”的边界的位置，从border的左上角开始定位，即如果这个父元素存在border，则坐标原点在border的左上角，而不是内容区域的左上角。
offsetx:ie特有，鼠标相对于“触发事件的元素”的位置，从内容区域左上角开始定位，不是从border左上角开始！这个属性比较好用，用来判断鼠标点在一个元素中的哪个位置很方便，ff没有直接替换的属性。
x：ie特有，跟layerx一个效果，可作为layerx的直接替换属性。
注：ie和ff的定位有个1px的差别，实际上，ie的定位从0开始，ff的定位从1开始，ff永远会比ie大1px，需要根据实际情况处理。
offsetleft:这个属性不是事件对象的属性，而是dom对象所有的，该属性表示的是dom对象在“该dom对象的层级关系中离该对象最近的，设置了position的父对象”中的位置，虽然话是这么说的，但是不同的浏览器效果不一样。
ie和firefox下javascript的兼容写法小结
、发现ie下input标签的id属性默认和name属性相同，而firefox必须明确写出id属性的名称否则不能使用id属性。
如：
在ie下如下代码可以执行而在firefox下却不可以：
<script>
alert(document.getelementbyid("username").value);
</script>
必须改为如下代码才可以：
以下为转载：
1. document.formname.item("itemname") 问题
说明:ie下,可以使用document.formname.item("itemname")或document.formname.elements["elementname"];
firefox下,只能使用document.formname.elements["elementname"].
解决方法:统一使用document.formname.elements["elementname"].
2.集合类对象问题
说明:ie下,可以使用()或[]获取集合类对象;firefox下,只能使用[]获取集合类对象.
解决方法:统一使用[]获取集合类对象.
3.自定义属性问题
说明:ie下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getattribute()获取自定义属性;firefox下,只能使用getattribute()获取自定义属性.
解决方法:统一通过getattribute()获取自定义属性.
4.eval("idname")问题
说明:ie下,,可以使用eval("idname")或getelementbyid("idname")来取得id为idname的html对象;firefox下只能使用getelementbyid("idname")来取得id为idname的html对象.
解决方法:统一用getelementbyid("idname")来取得id为idname的html对象.
5.变量名与某html对象id相同的问题
说明:ie下,html对象的id可以作为document的下属对象变量名直接使用;firefox下则不能.firefox下,可以使用与html对象id相同的变量名;ie下则不能。
解决方法:使用document.getelementbyid("idname")代替document.idname.最好不要取html对象id相同的变量名,以减少错误;在声明变量时,一律加上var,以避免歧义.
6.const问题
说明:firefox下,可以使用const关键字或var关键字来定义常量;ie下,只能使用var关键字来定义常量.
解决方法:统一使用var关键字来定义常量.
7.input.type属性问题
说明:ie下input.type属性为只读;但是firefox下input.type属性为读写.
8.window.event问题
说明:window.event只能在ie下运行,而不能在firefox下运行,这是因为firefox的event只能在事件发生的现场使用. firefox必须从源处加入event作参数传递。ie忽略该参数，用window.event来读取该event。
解决方法:
ie&firefox:
submitted(event)"/> …
<script language="javascript">
function submitted(evt) {
evt=evt?evt:(window.event?window.event:null);
}
</script>
window.open("b.html","","modal=yes,width=500,height=500,resizable=no,scrollbars=no");
9.event.x与event.y问题
说明:ie下,even对象有x,y属性,但是没有pagex,pagey属性;firefox下,even对象有pagex,pagey属性,但是没有x,y属性.
解决方法:使用mx(mx = event.x ? event.x : event.pagex;)来代替ie下的event.x或者firefox下的event.pagex.
10.event.srcelement问题
说明:ie下,event对象有srcelement属性,但是没有target属性;firefox下,even对象有target属性,但是没有srcelement属性.
解决方法:使用obj(obj = event.srcelement ? event.srcelement : event.target;)来代替ie下的event.srcelement或者firefox下的event.target. 请同时注意event的兼容性问题。
11.window.location.href问题
说明:ie或者firefox2.0.x下,可以使用window.location或window.location.href;firefox1.5.x下,只能使用window.location.
解决方法:使用window.location来代替window.location.href.
12.模态和非模态窗口问题
说明:ie下,可以通过showmodaldialog和showmodelessdialog打开模态和非模态窗口;firefox下则不能.
解决方法:直接使用window.open(pageurl,name,parameters)方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如：var parwin = window.opener; parwin.document.getelementbyid("aqing").value = "aqing";
13.frame问题
以下面的frame为例：
<frame src="xxx.html" id="frameid" name="framename" />
(1)访问frame对象:
ie:使用window.frameid或者window.framename来访问这个frame对象. frameid和framename可以同名。
firefox:只能使用window.framename来访问这个frame对象.
另外，在ie和firefox中都可以使用window.document.getelementbyid("frameid")来访问这个frame对象.
(2)切换frame内容:
在ie 和firefox中都可以使用window.document.getelementbyid("testframe").src = "xxx.html"或window.framename.location = "xxx.html"来切换frame的内容.
如果需要将frame中的参数传回父窗口(注意不是opener,而是parent frame)，可以在frme中使用parent来访问父窗口。例如：parent.document.form1.filename.value="aqing";
14.body问题
firefox的body在body标签没有被浏览器完全读入之前就存在；而ie的body则必须在body标签被浏览器完全读入之后才存在.
15. 事件委托方法
ie：document.body.onload = inject; //function inject()在这之前已被实现
firefox：document.body.onload = inject();
16. firefox与ie的父元素(parentelement)的区别
ie：obj.parentelement
firefox：obj.parentnode
解决方法: 因为firefox与ie都支持dom,因此使用obj.parentnode是不错选择.
17.cursor:hand vs cursor:pointer
firefox不支持hand，但ie支持pointer
解决方法: 统一使用pointer
18.innertext在ie中能正常工作，但是innertext在firefox中却不行. 需用textcontent。
解决方法:
if(navigator.appname.indexof("explorer") > -1){
document.getelementbyid('element').innertext = "my text";
} else{
document.getelementbyid('element').textcontent = "my text";
}
19. firefox中设置html标签的style时，所有位置性和字体尺寸的值必须后跟px。这个ie也是支持的。
20. ie,firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerhtml赋值，使用js增加一个tr时，使用appendchild方法也不管用。
解决方法：
//向table追加一个空行：
var row = otable.insertrow(-1);
var cell = document.createelement("td");
cell.innerhtml = " ";
cell.classname = "xxxx";
row.appendchild(cell);
21. padding 问题
padding 5px 4px 3px 1px firefox无法解释简写,
必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;
22. 消除ul、ol等列表的缩进时
样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对ie有效，padding属性对firefox有效
23. css透明
ie：filter:progid:dximagetransform.microsoft.alpha(style=0,opacity=60)。
ff：opacity:0.6。
24. 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;。
25. 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;
26. 对select的options集合操作
枚举元素除了[]外，selectname.options.item()也是可以的, 另外selectname.options.length, selectname.options.add/remove都可以在两种浏览器上使用。注意在add后赋值元素，否则会失败（本人试验如此）。
27. xmlhttp的区别
//mf
if (window.xmlhttprequest) //mf
{
xmlhttp=new xmlhttprequest()
xmlhttp.
xmlhttp.open("get",url,true)
xmlhttp.send(null)
}
//ie
else if (window.activexobject) // code for ie
{
xmlhttp=new activexobject("microsoft.xmlhttp")
if (xmlhttp)
{
xmlhttp.
xmlhttp.open("get",url,true)
xmlhttp.send()
}
}
}
28. innerhtml的区别
firefox不支持innerhtml, 解决办法可以如下
rng = document.createrange();
el = document.getelementbyid(elementid);
rng.setstartbefore(el);
htmlfrag = rng.createcontextualfragment(content);
while (el.haschildnodes()) //清除原有内容，加入新内容
el.removechild(el.lastchild);
el.appendchild(htmlfrag);
29. img的src刷新问题
在ie 下可以用php教程'" src="aa.php教程" style="cursor: pointer"/> 可以刷新图片，但在firefox下不行。主要是缓存问题，在地址后面加个随机数就解决了。编辑onclick事件代码如下： "this.src=this.src+'?'+math.random()"