js操作标签属性,IE与Firefox有区别

原创 2013年12月03日 11:56:02

IE和Firefox当中,js操作会有不同,我们了解这些可以适当解决浏览器兼容性的问题。

1、js操作div的style属性

<div id="divtest" style="width: 400px; height: 400px; display:block;">
	div测试区域
</div>
<input type="button" value="点击" onclick="take();"/>

<script language="javascript">

    var take = function(){
        var divObj = document.getElementById("divtest");
        //Firefox认 IE不认
        divObj.style="width: 400px; height: 400px; display:none;";
			
        //IE、Firefox 都认
        divObj.style.display="none";
    }

</script>

2、创建一个Element

通用的写法为createElement("div")

IE中也可以这样写

createElement("<div style='color:#FFFFFF'>");
但Firefox不认

3、给element.style.width赋值必须写成24px,只写数字24的话,FireFox会不认,IE里都可以
4、在使用Element,并给其绑定了onclick、onmouseover、onmousedown、onmouseout等事件

element.onclick = function() { alert("hello kitty"); };
时,需注意将此元素添加到上级元素上时要用appendChild,

不可以在上级中使用innerHTML操作,这样会使事件无效。

5、动态添加css代码

IE: 复制内容到剪贴板

cssStr = "p { color:#FF0000;} a { font-size:9pt;}";
var style = win.document.createStyleSheet();
style.cssText = cssStr;
FireFox: 复制内容到剪贴板

cssStr = "p { color:#FF0000;} a { font-size:9pt;}";
var style = win.document.createElement("style");
style.type = "text/css";
style.innerHTML = cssStr;
win.document.getElementsByTagName("HEAD").item(0).appendChild(style); 
6、table在后面添加加行或列,

通用写法insertRow(-1),insertCell(-1)
IE中insertRow(),insertCell()这样写也可以,Firefox不认

7、警告对话框alert(),

IE中书写时无参数则默认参数为空字符串,

Firefox中则必须输入参数,传空参数则要写成alert("");

8、IE中的width、height与Firefox中概念不同,

IE中width=FireFox中的width+2*borderWidth+2*Padding

9、获得事件和事件源
IE:

    事件:window.event
    事件源:window.event.srcElement
FireFox:

    事件:arguments.callee.caller.arguments[0]
    事件源:arguments.callee.caller.arguments[0].target

10、在选中区域粘贴HTML
IE: 复制内容到剪贴板

var r = window.document.selection.createRange();
range.pasteHTML("HTML代码");
FireFox: 复制内容到剪贴板

var r = window.getSelection().getRangeAt(0);
var oFragment = r.createContextualFragment(“HTML代码”);
r.deleteContents();
r.insertNode(oFragment); 
11、document.getElementById方法在Firefox与IE中的区别
如下,有一name="txtVersion"的text控件:
<div> 
<input type="text" name="txtVersion" size="15" value="Version" maxlength="25"> 
</div> 
根据上面信息,我们要用JS获得其控件中的值,我们这样写:
var strVersion= document.getElementById("txtVersion").value;
上面的写法没错,在以IE为内核的浏览器中是正确的,但是Firefox对此要求的很严格,上面代码不能通过。在Firefox中,用document.getElementById方法,一定要为控件加上id=“txtVersion”属性,如下:
<div>
<input type="text" name="txtVersion" id="txtVersion" size="15" value="Version"
maxlength="25">
</div> 

12、js获取日期属性

在firefox或者chrome下,以下js怎么获得的年分是111,而不是2011。

var date=new Date();
//只在IE下正确
var year=date.getYear();

要用getFullYear()

//IE、Firefox都正确
var year=date.getFullYear(); 
alert(year);

js在firefox和ie中的区别(一)

一、getElementsByName在ie中获取不到子集。 function custom_getElementByName(){ //firefox中直接获取 var nav_u...
  • shanshan209
  • shanshan209
  • 2011年08月04日 14:03
  • 2405

JavaScript在IE浏览器和Firefox浏览器中的差异总结

JavaScript在IE浏览器和Firefox浏览器中存在一些差异,以下对这些差异部分进行了总结,以及解决方案: 1.HTML对象的 id 作为对象名的问题 IE:HTML 对象...
  • wang8088498
  • wang8088498
  • 2015年12月14日 17:06
  • 812

IE和火狐的事件机制有什么区别?如何阻止冒泡?

1.事件流描述的是从页面中接受事件的顺序,分为冒泡流和捕获流; 2.事件冒泡是指事件从最具体的元素接收,然后逐级向上传播,直到不具体的节点(通常指文档节点);而事件捕获相反,它是从不具体的节点开始,逐...
  • kaixuanweb
  • kaixuanweb
  • 2017年10月25日 23:36
  • 366

ie事件机制和火狐事件机制

事件机制 事件冒泡:事件从当前元素对象触发,然后向上层元素搜索相同对象事件并触发(直搜到document节点)。IE事件默认都只这种类型的事件。 事件捕获:从document节点开始搜索事件,然后...
  • sinat_32067081
  • sinat_32067081
  • 2017年03月28日 10:27
  • 1519

JS:IE与Firefox区别

IE和Firefox(火狐)在JavaScript方面的不兼容及统一方法总结如下:1.兼容firefox的 outerHTML,FF中没有outerHtml的方法。if (window.HTMLEle...
  • longjxchina
  • longjxchina
  • 2010年12月28日 15:30
  • 430

js 兼容Firefox与IE的Excel到处

js 兼容Firefox与IE的Excel到处
  • wupd2014
  • wupd2014
  • 2016年03月02日 18:37
  • 531

ie和火狐兼容问题

1. document.form.item 问题 (1)现有问题: 现有代码中存在许多 document.formName.item("itemName") 这样的语句,不能在Firefox(...
  • sinolzeng
  • sinolzeng
  • 2015年02月25日 09:01
  • 1126

javascript操作标签的常规属性

html标签和js之间存在映射的关系,html标签在js中以Dom节点对象存在。 js获取html标签中属性的方式有两种:  1. 通过dom对象的getAttribute方法   2. 通过dom...
  • zhangyingchengqi
  • zhangyingchengqi
  • 2015年04月02日 11:43
  • 1246

IE、FF、Chrome浏览器中的JS差异介绍

原文链接:http://www.jb51.net/article/40533.htm 因为浏览器公司各自为利益考虑,到目前为止各浏览器的HTML标准或是JS标准都还未统一。在平常的开发中,我们常使用...
  • greenqingqingws
  • greenqingqingws
  • 2016年01月12日 13:55
  • 1632

Padding在Chrome和IE中的区别

div{ width:500px; padding:0px; } chrome和ie下宽度均为500px,两者相同。   但是: div{ ...
  • alex8046
  • alex8046
  • 2014年10月27日 17:25
  • 2090
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js操作标签属性,IE与Firefox有区别
举报原因:
原因补充:

(最多只允许输入30个字)