开发跨浏览器的JavaScript方法说明第1/2页

开发跨浏览器的JavaScript

1. childNodes在ff中和ie的区别。

ff中的node(nodeType = 1)都是用textNode(nodeType = 3)分开的，而ie/op不是这样的。

<div id="box1"><span>content</span></div>

在ff下,box1的childNodes为3个，ie下为1个。

2. 设置某个node对象的style class名称。

ie中要设置某个node的class用"className"作为attr来set或者get。

ff等其它的浏览器用"class"作为attr来set或者get。

代码:

if(typeof node1.getAttribute("className") == "string") {

.

}

3. 设置某个node对象的style content。

直接举例把

代码:

var oStyle = oNode.getAttribute("style");

// ie

if(oStyle == "[object]") {

oStyle.setAttribute("cssText", strStyle);

oNode.setAttribute("style", oStyle);

} else {

oNode.setAttribute("style", strStyle);

}

4. 事件对象。

ie用event

ff用evnt

5. 事件作用对象

ie用objEvent.srcElement

ff用objEvent.target

这个跟 xml 文件写作有关，将 IE 的 preserveWhiteSpace 设为 true 看看，底下是取自微软的说明文件
代码:

var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.4.0");

xmlDoc.async = false;

xmlDoc.preserveWhiteSpace = true;

xmlDoc.load("books.xml");

alert(xmlDoc.xml);

xmlDoc.async = false;

xmlDoc.preserveWhiteSpace = false;

xmlDoc.load("books.xml");

alert(xmlDoc.xml);

-----------------------

1.向表中追加行：

document.createElement 和document.appendChild方法可以很容易的做到向表中追加行或从头创建包含表行的新表：使用 document.createElement创建表格，在使用document.appendChild方法将这些表单元格增加到表行；接下来使用 document.appendChild将表行增加到表中。

IE允许讲tr元素增加到tbody中，而不是直接增加到table中。

<table id="myTable">

<tbody id="myTableBody"></tbody>

</table>

向这个表中增加行的正确做法是把行增加到表体，而不是增加到表，如是所示：

var cell=document.createElement("td").appendChild(document.createTextNode("foo");

var row = document.createElement("tr").appendChild(cell);

document.getElementById("mysqlTableBody").appendChild(row);

幸运的是，这种方法在所有当前浏览器都通用，也包括IE。如果你养成习惯，总是使用表中的表体，就不用担心这个问题了。

2 通过Javascrīpt设置元素的样式

可以通过Javascrīpt使用元素的setAttribute方法设置元素的样式。例如，要把span 元素中的文本修改为采用红色粗体显示，可以使用setAttribute方法如下:

var spanElement = document.getElementById("mySpan");

spanElement.setAttribute("style","font-weight:bold ; color: red;");

除了IE，这种方法在当前其它浏览器上都是行得通的.对于IE，解决方法是使用元素 style对象的cssText属性来设置所需样式，尽管这个属性不是标准的，但是得到广泛支持， 如下所示：

var spanElement = document.getElementById("mySpan");

spanElement.style.cssText = "font-weight:blod ; color:red;";

这种方法在IE和大多数其他浏览器上都能很好好工作，只有Opera除外。为了让代码在 所有当前浏览器上都可移植，可以同时使用这两种方法，也就是既使用setAttribute方法， 又使用style对像的cssText属性，如下所示：

var spanElement = document.getElementById("mySpan");

spanElement.setAttribute("style","font-weight:bold ; color: red;");

spanElement.style.cssText = "font-weight:blod ; color:red;";

当前1/2页 12下一页阅读全文

赞 (0)

相关推荐

  • 开发跨浏览器javascript常见注意事项

    一.向表追加行 在以往使用Ajax的经历中,你很可能会使用JavaScript向现有的表中追加行,或者从头创建包含表行的新表.document.createElement和document.appendChiid方法可以使这很容易做到,只需使用document.createElement创建表单元格,再使用document.app-endChild方法将这些表单元格增加到表行.接下来的编辑步骤是使用document.append- Child将表行增加到表中. 在Firefox.Safari和O

  • js监听表单value的修改同步问题，跨浏览器支持

    js监听表单value的修改同步问题，跨浏览器支持

    想要实现的功能大概是这样的: 有两个文本框,其中一个只读,另一个可以输入.要求在可输入文本框中输入文本时,只读文本框能够获得输入的值,且只读文本框旁边出现提示信息,实时显示只读文本框的内容. 这个功能看是简单,但其实并没有想象的那么简单.(注意,可输入框的处理没什么可讨论的,关键是只读框的处理) 一开始,我们一般会想到在只读文本框上运用onchange事件.一试,发现onchange根本没用,该事件是在文本框获得焦点,然后内容改变失去焦点后才触发的,现在在只读文本框上根本没有这些,它的内容是通过

  • 跨浏览器通用、可重用的选项卡tab切换js代码

    由于近来学了点js,于是我装逼道...不太难吧...就切一下display属性?同学无视我..说要搞个通用的...什么还要跟ajax交互..???我愣是没有听懂...到底要搞什么...权当作练手,我自己胡弄了一个. 需求:同学口中的通用我不知道神马意思...那我就按自己的理解吧.. ①跨浏览器,IE6+,FF,Chrome,Safari,Opera ②同一个页面可以用同一个js设置不同的选项卡. 说太多没啥米用,来看代码吧. 一.html部分(其实这还没啥好看的,设置了三个,前两个是一样的,通过

  • javascript Range对象跨浏览器常用操作第1/2页

    开发的功能主要涉及即时代码着色(CodeColoring)和语法提示(CodeHints)功能,稍后会总结功能开发中问题或提供源码. 以下是个人对Range对象的了解和常用操作的实例和总结: Range对象 Range对象表示文档的连续范围区域,如用户在浏览器窗口中用鼠标拖动选中的区域. dom标准Range对象 http://www.w3school.com.cn/xmldom/dom_range.asp 在ie中使用TextRange对象 http://www.hbcms.com/main/

  • javascript Array.sort() 跨浏览器下需要考虑的问题

    javascript Array.sort() 跨浏览器下需要考虑的问题

    然而在做跨浏览器的测试时在chrome浏览器下发现了一个问题,测试人员发现(见图1),在chrome下依据某列排序时,如果两行的排序数值相同,chrome不是按通常情况保持这两列的顺序不变,而是将他们顺序调换.在google一下问题之后,我们发现原来是当初ECMAscript规范中并未规定具体的sort算法,所以导致各个浏览器都有自己的sort算法,然而由于有些厂商是基于不稳定的排序算法实现的,如chrome和Mozilla/Firefox 3.0以前的排序算法都是不稳定的,不过IE是稳定的排序

  • 详解javascript跨浏览器事件处理程序

    本文为大家分享了javascript跨浏览器事件处理机制,供大家参考,具体内容如下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跨浏览器的事件处理程序</title> </head> <body> <input type="button" value=

  • 编写跨浏览器的javascript代码必备[js多浏览器兼容写法]

    序号 操作 分类 IE(6.0) FireFox(2.0) Mozilla(1.5) 当前浏览器 备注 1 "." 访问tag的固有属性 OK OK OK OK 2 "." 访问tag的用户定义属性eg: <input type="checkbox" myattr="test"> OK NO NO OK 可以用getAttribute函数 替代 3 obj.getAttribute 访问tag的固有属性 OK OK

  • 开发跨浏览器的JavaScript方法说明第1/2页

    开发跨浏览器的JavaScript 1. childNodes在ff中和ie的区别. ff中的node(nodeType = 1)都是用textNode(nodeType = 3)分开的,而ie/op不是这样的. <div id="box1"><span>content</span></div> 在ff下,box1的childNodes为3个,ie下为1个. 2. 设置某个node对象的style class名称. ie中要设置某个nod

  • js 实现一些跨浏览器的事件方法详解及实例

    js实现一些跨浏览器的事件方法 用JavaScript实现事件的绑定,移除,以及一些常用的事件属性的获取,时常要考虑到在不同浏览器下的兼容性,下面给出了一个跨浏览器的事件对象: var EventUtil = { on: function(element, type, handler) {/* 添加事件 */ if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (ele

  • javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)

    复制代码 代码如下: var EventUtil={ //跨浏览器处理程序---创建方法 addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListneter(type,handler,false); }else if(element.attachEvent){ element.attachEvent("on"+type,handler); }else{ el

  • JavaScript中的跨浏览器事件操作的基本方法整理

    绑定事件 EU.addHandler = function(element,type,handler){ //DOM2级事件处理,IE9也支持 if(element.addEventListener){ element.addEventListener(type,handler,false); } else if(element.attachEvent){ //type加'on' //IE9也可以这样绑定 element.attachEvent('on' + type,handler); } /

  • 跨浏览器的设置innerHTML方法

    Ajax是个好东西,但使用起来却不是那么方便.问题总结如下: 在各种浏览器上的创建方式和使用方法不一致  各个浏览器对响应的缓存策略有所不同  浏览器存在跨域获取限制  前两个问题可以通过封装 XMLHTTPRequest 对象来解决,第三个问题的解决方法有很多中,兼容性和移植性比较好的就是在本域服务器上放置一个中转 proxy .Modello.ajax 就是提供这套解决方案的工具集. 安装 下载 Modello 和 Mdello.ajax  解压并将 modello.js, modello.

  • Jquery跨浏览器文本复制插件Zero Clipboard的使用方法

    当开发者需要对某局部文本进行点击复制效果时,在IE下实现比较简单.但要想做到跨浏览器比较困难了.Zero Clipboard 它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比IE的document.execCommand("Copy") 更加灵活. Zero Clipboard 的实现原理 Zero Clipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash.但最新的 Flash Pl

  • myEvent.js javascript跨浏览器事件框架

    event究竟有多么复杂?可见前辈的6年前的努力:最佳的addEvent是怎样诞生的,后起之秀jQuery也付出了一千六百多行血汗代码(v 1.5.1)搞定了6年后出现的各种核的浏览器. 我参考前辈的代码以及自己的理解尝试写了一个事件框架,我的框架完成了一个事件机制的核心,它能提供统一接口实现多事件绑定以及避免内存泄漏等其他一些问题,更重要的是性能还不错. 我的手法: 所有回调函数根据元素.事件类型.回调函数唯一ID缓存在一个_create对象中(其内部具体结构可见下面源码的关于_cache的注

  • Javascript iframe交互并兼容各种浏览器的解决方法

    在Web前端开发中,我们经常会用到iframe这个控件. 但是这个控在内.外交互时,往往各个浏览器所用的关键字不同,很是麻烦,为了能够得到子iframe中的window对象,各家浏览器有着各家的指定,有的是window,有的是contentWindow等等也许还有我们不知道的. 但是从子页面访问父层页面,其本上大家都是window.parent就可以了. 那么通过这个特征,我们可以在子页面中,把自身的window对象传递给父页面就可以了,这样父页面就很轻松的访问子页面,再也不用靠虑如何从ifra

随机推荐