开发跨浏览器的JavaScript（转）

2008 - 09 - 24

开发跨浏览器的JavaScript

关键字: 跨浏览器 javascript

在学习 << Ajax 基础教程 >>后对部分知识的总结和摘录

A 向表中追加行

将tr增加到 tbody 中，而不是直接增加到 table 中，如下

引用

<table>
   <tbody>
   </tbody>
</table>

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

var cell =document.createElement(
"td"

).appendChild(document.createTextNode(
"foo"

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

).appendChild(cell);
document.getElementById(
"myTableBody"

).appendChild(row);

var cell =document.createElement("td").appendChild(document.createTextNode("foo"));
var row = document.createElement("tr").appendChild(cell);
document.getElementById("myTableBody").appendChild(row);

这个方法在所有的浏览器中都支持，而不加到表体中的如 ie 就不可以

Ｂ　通过 JavaScript 设置元素的样式
可以通过 JavaScript 使用 setAttribute 方法设置元素的样式，如把 span 元素中的文本修改为红色粗体显示，可以使用 SetAtribute 方法如下

var sapnElement = document.getElementById(
"myspan"

);
    spanElment.setAttribute(
"style"

, 
"font-weight:bold;color:red"

);

var sapnElement = document.getElementById("myspan");
	spanElment.setAttribute("style", "font-weight:bold;color:red");

这种方法除了 IE 在其他浏览器中都是可以实现的
对 IE 的解决办法是使用元素的 style 对象的 cssText 属性来设置的，得到广泛的支持
如下所示：

var spanElement = document.getElementById(
"myspan"

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

;

var spanElement = document.getElementById("myspan");
	spanElement.style.cssText = "font-weight:bold;color:red";

这种办法贼大多数的浏览器上都可以实现除了 opera 以外。为了在所有浏览器中都可以实现，只有两种方法都执行

var spanElement = document.getElementById(
"myspan"

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

;
    spanElment.setAttribute(
"style"

, 
"font-weight:bold;color:red"

);

var spanElement = document.getElementById("myspan");
	spanElement.style.cssText ="font-weight:bold;color:red";
    spanElment.setAttribute("style", "font-weight:bold;color:red");

C 设置元素的 class 属性（内联样式）
使用 firefox 和 safari 之类的浏览，可以使用元素 setAttribute 方法来设置元素的 class 属性，如下所示

var element = document.getElementById(
"myElement"

);
    element.setAttribute(
"class"

, 
"styleClass"

);

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"

);

	var element = document.getElementById("myElement");
			element.setAttribute("class", "styleClass");
			element.setAttribute("className", "styleClass");

D 创建输入元素
Html 本身提供一组有限的输入元素，只是元素的 type 属性的值不同，选择框和文本区又自己特有的标记。通过 JavaScript 动态的创建输入元素（创建单选按钮除外）只要遵循简单的原则就行。
       考虑在哪里把新创建的元素增加到父元素中，必须注意 document.createElement和 setAttribute 语句的顺序。在某些浏览器中，只有创建了元素，而且正确的设置 type属性时，才会把新创建的元素增加到其父元素中。如下代码可能产生奇怪行为：

document.getElementById(
"formElement"

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

, 
"button"

);

document.getElementById("formElement").appendChild(button);
	button.setAttribute("type", "button");

为了避免奇怪的行为，确保创建输入元素后设置其所有属性，特别是 type 属性，然后在把它增加到父元素中，如下：

var button = document.createElement(
"input"

);
    button.setAttribute(
"type"

, 
"button"

);
    document.getElementById(
"formElement"

).appendChild(button);

var button = document.createElement("input");
	button.setAttribute("type", "button");
	document.getElementById("formElement").appendChild(button);

E 向输入元素增加事件处理程序
向输入元素增加事件处理程序的标准做法是使用元素的 setAttribute 方法，它以事件名作为属性名，并把函数处理程序作为属性值，如下：
var formElement = document.getElementById("formElement");
formElement.setAttribute("onclick", "doFun();");
除了 IE ，上面代码在其他所有的浏览器都可用，如果要在 IE 中使用 JavaScript 设置元素的事件处理程序，必须对元素使用点击法来应用所需的事件处理程序，并把它赋为匿名函数，这个匿名函数要调用所需的事件处理程序。如下：

var formElement = document.getElementById(
"formElement"

);
    formElement.onclick=function(){doFoo();}

var formElement = document.getElementById("formElement");
	formElement.onclick=function(){doFoo();}

注意：是如何通过点击法从 formElement 引用 onclick 事件处理程序。onclick 事件处理程序赋为一个匿名函数，这个匿名函数只是调用了所有的事件处理程序，在这个例子中事件处理程序就是doFoo。
   幸运的是，这种技术得到 IE 和其他很多浏览器的支持。

F 创建单选按钮
通过 JavaScript 动态创建按选按钮是很费劲的。因为 IE 中创建单选按钮的方法和其他浏览器所有的方法大相径庭。
其他浏览器创建的方法

var raidoButton = document.createElement(
"input"

);
raidoButton.setAttribute(
"type"

, 
"radio"

);
radioButton.setAttribute(
"name"

, 
"radioButton"

);
radioButton.setAttribute(
"value"

, 
"checked"

);

var raidoButton = document.createElement("input");
raidoButton.setAttribute("type", "radio");
radioButton.setAttribute("name", "radioButton");
radioButton.setAttribute("value", "checked");

这个方法在 ie 中也可以显示但是无法将其显示
IE 中创建方法如下

var radiobutton = document.createElement(
"<input type='radio' name='radioButton' value='checked'>"

);

var radiobutton = document.createElement("<input type='radio' name='radioButton' value='checked'>");

IE 创建的单选按钮与其他的浏览器不兼容，方法很简单，使用浏览器的嗅探机制，使得在创建单选按钮时脚本就能知道该使用哪个方法。幸运的是不用检查大量不同的浏览器，假设只使用现代浏览器，脚本只需在 IE 和其他浏览器间进行分区就行了。
IE 能识别出名为 uniqueID 的 document 对象的专用属性。IE 是唯一能识别这个属性的浏览器，所以 uniqueID 很适合用来确定脚本是不是在 IE 中运行。
使用 document.uniqueID 属性来确定脚本在哪个浏览器中运行时，使用 IE 方法或是标准兼容 的方法，代码如下

if


(document.uniqueID) {
    var radiobutton = document.createElement(
"<input type='radio' name='radioButton' value='checked'>"

);
} 
else


 {
var raidoButton = document.createElement(
"input"

);
raidoButton.setAttribute(
"type"

, 
"radio"

);
radioButton.setAttribute(
"name"

, 
"radioButton"

);
radioButton.setAttribute(
"value"

, 
"checked"

);
}

if(document.uniqueID) {
	var radiobutton = document.createElement("<input type='radio' name='radioButton' value='checked'>");
} else {
var raidoButton = document.createElement("input");
raidoButton.setAttribute("type", "radio");
radioButton.setAttribute("name", "radioButton");
radioButton.setAttribute("value", "checked");
}