关于javascript浏览器兼容性的几点注意事项

首先，将行追加到表中

在过去使用Ajax的经验中，您很可能会使用JavaScript将行追加到现有表中，或者创建一个新表，其中包含从头开始的表行. document.createElement和document.appendChiid方法可以简化此过程，只需使用document.createElement创建表单元格，然后使用document.app-endChild方法将这些表单元格添加到表行中. 下一个编辑步骤是使用document.append-Child将表行添加到表中.

在当前的浏览器（例如Firefox，Safari和Opera）中，这是可能的. 但是，如果您使用的是lE，则表行将不会出现在表中. 更糟糕的是，IE甚至不会抛出任何错误，也不会提供任何提示，提示该表行确实已附加到表中但不会显示.

在这种情况下，解决方案很简单. IE允许将tr元素添加到tbody元素，而不是直接添加到table元素. 例如，如果您定义一个空表，如下所示:

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

向该表添加行的正确方法是将行添加到表主体而不是表中，如下所示:

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

幸运的是，此方法适用于所有当前的浏览器，成习惯并始终使用桌子上的身体，则不必担心这个问题.

两个通过javascript设置元素样式

使用Ajax技术，开发人员创建的Web应用程序可以与服务器无缝通信，而无需刷新整个页面. 但是对于A1ax请求，将不会出现此类页面闪烁，因此用户可能不知道该页面上的某些数据已更新. 您可能需要修改某些元素的样式，以指示页面上的某些数据已更改. 例如，如果通过Ajax请求无缝更新了股票价格，则可以突出显示股票名称.

可以使用JavaScript的setAttribute方法设置元素的样式. 例如js的浏览器兼容问题，span元素中的文本应更改为粗体红色. 您可以按以下方式使用setAttribute疗法:

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

除IE之外，此方法在其他当前浏览器中也适用. 对于IE，解决方案是使用元素样式对象的cssText属性设置所需的样式. 尽管此属性不是标准属性，但其广泛支持如下:

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

此方法在Internet Explorer和Opera以外的大多数其他浏览器中都可以正常使用. 为了使代码可在所有当前浏览器中移植，可以同时使用这两种方法，即同时使用元素样式对象的setAttribute方法和cssText属性，如下所示:

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

因此，可以在所有当前浏览器中正常设置元素的样式.

三，设置元素的class属性

阅读上一节之后，您了解了可以通过JavaScript设置元素的内联样式. 您可能会认为，简单地设置无元素类组件应该是最简单的. 不幸的是，这种情况并非如此. 与设置元素内联样式类似，通过JavaScript动态设置元素类属性也有一些特殊性.

您可能已经猜到，IE在当前浏览器中是一种奇怪的类型，但是解决方案非常简单. 在使用诸如Firefox和Safari之类的浏览器时，可以使用元素的setAttribute方法来设置冗余的类属性，如下所示:

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

奇怪的是，如果使用setAttribute方法并将属性名称指定为class，则IE不会设置元素的class属性. 相反，仅使用setAttribute方法时，IE会自行识别className属性. 对于这种情况，完整的解决方案是: 使用元素的setAttribute方法时，将class和className都用作属性名称，如下所示:

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

当前，大多数浏览器将使用类属性名称，而忽略className，而IE恰好相反.

四，创建输入元素

输入元素为用户提供了一种与页面进行交互的方式. HTML本身具有一组有限的输入元素，包括单行文本框，多行文本框，选择框，按钮，复选框和单选按钮. 您可能希望使用JavaScfipt作为Ajax实现的一部分来动态构建此类输入元素.

可以将单行文本框，按钮，复选框和单选按钮创建为输入元素，但是type属性的值不同. 选择框和文本区域具有自己的唯一标记. 只要遵循一些简单的规则，就可以通过JavaScript动态创建输入元素（单选按钮除外，单选按钮除外，“创建单选按钮”一节中对此进行了说明）. 使用document.createElement方法可以轻松地创建选择框和文本区域，只需将文档标签名称传递给document.createElement，例如select或textarea.

单行文本框，按钮，复选框和单选按钮要困难一些，因为它们都具有相同的元素名称输入，但是type属性的值不同. 因此，要创建这些元素，不仅需要使用document.createElement方法，还需要调用元素的setAttribute方法来设置type属性的值. 这并不困难，但是确实需要额外的一行代码.

考虑将新创建的输入元素添加到其父元素的位置，我们必须注意document.createElement和setAttribute语句的顺序. 在某些浏览器中，仅当创建了元素并且正确设置了type属性后，Yu才会将新创建的元素添加到其父元素中. 例如，以下代码段在某些浏览器中可能会发生奇怪的行为:

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

为避免发生奇怪的行为，请确保在构建输入元素后设置其所有属性js的浏览器兼容问题，尤其是type属性，然后将其添加到父元素，如下所示:

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

遵循此简单规则有助于消除将来可能出现的一些困难问题.

五个将事件处理程序添加到输入元素

向输入元素添加事件处理程序应该与使用setAttribute方法并指定事件处理程序的名称和所需的函数处理程序的名称一样容易，对吗？错误？设置元素的事件处理程序的标准方法是使用元素的setAttribute方法，该方法将事件名称作为属性名称，将函数处理程序作为属性值. 看起来像这样:

var formElement = document,getElementById("formElement"); 
formElement.setAttribute("onclick", "doFoo();"); 

上面的代码（除IE之外）可在所有当前浏览器中使用. 如果使用JavaScfipt在IE中设置元素的事件处理程序，则必须使用点表示法来引用元素的所需事件处理程序，而不是将其分配为匿名函数，此匿名函数需要调用所需的事物处理程序. 像这样:

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

请注意如何用点符号从formElement引用onclick事件处理程序. onclick事件处理程序被分配为匿名函数. 此匿名函数仅调用所需的事件处理程序. 在此示例中，事件处理程序为d​​oFoo.

幸运的是，IE和所有其他当前浏览器都支持此技术. 因此可以通过JavaScfipt动态设置表单元素的事件处理程序.

六，创建单选按钮

最好总是在最后. 通过JavaScript动态创建单选按钮非常费力，因为IE中创建单选按钮的方法与其他浏览器使用的方法大不相同.

除了IE之外，当前所有其他浏览器都允许您使用以下方法创建单选按钮（这些方法应该是可以想到的）:

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

这将在除IE之外的所有当前浏览器中创建单选按钮，并且它将正常工作. 在IE中，单选按钮确实会显示. 但是无法选择它，因为单击单选按钮行未按预期选择它. 在IE中，创建单选按钮的方法与其他浏览器使用的方法完全不同，并且根本不兼容. 对于先前创建的单选按钮，可以按如下所示在IE中创建它:

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

幸运的是，确实可以在IE中的JavaScript中动态创建单选按钮，但是这样做更加困难并且与其他浏览器不兼容.

如何克服此限制？答案很简单. 这是需要某种浏览器嗅探机制的需求，以便在创建单选按钮时，脚本可以知道要使用哪种方法. 幸运的是，您不必检查许多不同的浏览器. 假设仅使用现代浏览器，则该脚本仅需要区分IE浏览器和其他浏览器.

IE可以识别名为uniqueID的文档对象的特殊属性. IE也是唯一可以识别此属性的浏览器，因此uniqueID非常适合确定脚本是否在IE中运行.

使用docurnent.uniqueID属性确定脚本在哪个浏览器中运行时，可以将IE特定方法和标准兼容方法结合使用，这将产生以下代码:

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-256279-1.html