FireFox与IE setAttribute区别[转]

最新推荐文章于 2020-07-14 11:30:32 发布

原创最新推荐文章于 2020-07-14 11:30:32 发布 · 740 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ie #firefox #浏览器 #class #input #button

本文介绍了在不同浏览器间开发JavaScript时遇到的常见问题及解决方案，包括处理节点差异、设置样式和事件处理等。

开发跨浏览器的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>

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

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 对像的cssT ext 属性，如下所示：

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

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

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

3 设置元素的class 属性

IE 是当前浏览器的一个异类，不过解决方法倒也相当简单，使用 Firefox 和 Safari 之类的浏览时，可以使用元素的 setArribute 方法来设置元素的 class 属性，如下所示：

var element = document.getElementById("myElement");

element.setAttribute ("class","styleClass");

奇怪的是，如果使用 setAttribute 方法，并指定属性名为 class ， IE 并不会设置元素的 class 属性。相反，只使用 setAttribute 方法时 IE 会自己识别 className 属性。

对于这种情况，完备的解决方法是：使用元素的 setAttribute 方法时，将 class 和 className 都用作属性名，如下所示：

var element = document.getElementById("myElement");

element.setAttribute ("class","styleClass");

element.setAttribute ("className","styleClass");

当前大多数浏览器都会使用 class 属性名而忽略 className,IE 则正好相反。

4 创建输入元素

输入元素为用户提供了页面交互的手段， HTML 本身有一组有限的输入元素，包括单行文框、多行文本框、选择框、选择框、按钮、复选框和单行钮。你可能想使用 Javascrīpt 动态地创建这样一些输入元素作为 Ajax 实现的一部分。

单行文本框、按钮、复选框和单选钮都可以创建为输入元素，只是 type 属性的值有所不同。选择框和文本区有自己特有的标记，通过 Javascrīpt 动态创建输入元素很简单（但单选钮除外），只要遵循一些简单的规则就行。使用 document.createElement 方法可以很容易创建选择框和文本区，只需向 document.createElement 传递元素的标记名，如 select 或 textarea 。

单行文本框、按钮、复选框和单选钮稍难一点，因为它们都有同样的元素名 input ，只是 type 属性的值不同。所以，要创建这些元素，不仅需要使用 document.createElement 方法，后面还要调用元素的 setAttribute 方法来设置 type 属性的值。这并不难，但确实要多加一行代码。

考虑在哪里把新创建的输入元素增加到其父元素中，必须注意d ocument.createElement 和 setAttribute 语句的顺序。在某些浏览器中，只有创建了元素，而且正确设置了 type 属性时，才会把新创建的元素增加到其父元素中。例如，以下代码段在某些浏览器中可能有奇怪的行为：

document.getElementById("formElement").appendChild(button);

button.setAttribute ("type","button");

为了避免奇怪的行为，要确保创建输入元素的一设置其所有属性，特别是 type 属性，如下：

var button = document.createElement("input");

button.setAttribute ("type","button");

document.getElementById("formElement").appendChild(buttion);

遵循这个简单的规则，有助于消除以后可能出现的一些难于诊断的问题。

5.向输入元素增加事件处理程序

向输入元素增加事件处理程序应该与使用 setAttribute 方法并指定事件程序的名字和所需函数程序的名字一样容易，对吗？错。设置元素的事件处理程序的标准做法是使用元素的 setAttribute 方法，它以事件名作为属性名，并把函数处理程序作为属性值，如下所示：

var formElement = document.getElementById("formElement");

formElement.setAttribute ("onclick","doFoo();");

除了 IE ，上面的代码在所有当前浏览器中都能工作，如果在 IE 中使用 Javascrīpt 设置的事件处理程序，必须对元素使用点记法来引用所需的事件处理程序，并把它赋为匿名函数，这个匿名函数要调用所需要的事件处理程序，如下所示：