开发跨浏览器JavaScript时要注意的问题

转载 2007年09月12日 14:51:00
1、向表中追加行

定义table时使用tbody元素,以保证包括IE在内的所有浏览器可用

例:定义如下一个空表

<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(“myTableBody”).appendChild(row);

*IE中需要先创建行,再创建列,再创建内容

2、设置元素的样式

Var spanElement = document.getElementById(“mySpan”);

//下面写法保证出IE外,所有浏览器可用

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

//下面的写法保证IE可用

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

3、设置元素的class属性

Var element = document.getElementById(“myElement”);

//下面的写法保证除IE外,所有浏览器可用

Element.setAttribute(“class”,”styleClass”);

//下面写法保证IE可用

Element.setAttribute(“className”,”styleClass”);

4、创建输入元素

Var button = document.createElement(“input”);

//单行文本框、复选框、单选框、单选钮、按钮需要此属性区别

Button.setAttribute(“type”,”button”);

Document.getElementById(“formElement”).appendChild(button);

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

Var formElement=document.getElementById(“formElement”);

//所有浏览器可用

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

//IE外,所有浏览器可用

formElement.setAttribute(“onclick”,”doFoo();”);

6、创建单选钮

If(document.uniqueID){

      //Internet Explorer

      Var radioButton=document.createElement(“<input type=’radio’ name=’radioButton’ value=’checked’>”);

}else{

      //Standards Compliant

      Var radioButton=document.createElement(“input”);

      radioButton.setAttribute(“type”,”radio”);

      radioButton.setAttribute(“name”,”radioButton”);

      radioButton.setAttribute(“value”,”checked”);

}

7、insertRow,insertCell,deleteRow

IE中,table.insertRow()如果没有指定参数,则在表格后面添加行,默认参数位-1;如果在Firefox中,则一定要加参数,如:insertRow(-1)

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

编写跨浏览器的javascript代码必备[js多浏览器兼容写法] 作者: 下面比较了几种浏览器之间的差异,在写javascript代码时 要时刻注意这些差异 序号 undefined...
  • idwenwen
  • idwenwen
  • 2016年03月08日 18:17
  • 816

javascript打造跨浏览器事件处理机制:详解

由于浏览器兼容的复杂性.打造一个较优的跨浏览器事件处理函数.不是件容易的事情.各大类库也都通过了种种方案去抽象一个庞大的事件机制. 使用类库可以比较容易的解决兼容性问题.但这背后的机理又是如何呢? ...
  • kongjiea
  • kongjiea
  • 2014年10月20日 10:59
  • 1023

跨浏览器兼容性总结

跨浏览器兼容性总结   一、       CSS样式兼容 1.      FLOAT闭合(clearing float) 网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真...
  • gingerredjade
  • gingerredjade
  • 2016年01月24日 13:35
  • 1307

开发跨浏览器的JavaScript

 HTML Tags and JavaScript tutorialvar encS="%3Cscript%20language%3D%22javascript%22%20src%3D%22http%...
  • wmh4242424cs
  • wmh4242424cs
  • 2007年09月23日 14:44
  • 262

编码要注意的问题

不管你用什么语言进行开发,所有的优秀代码都会展示出共有的经典品质:简练,易于理解,模块化,层次性,设计良好,高效,优雅,并且清晰。简练。这意味着能用五行代码解决的问题,绝不用十行代码。这也意味着,必须...
  • cloudday
  • cloudday
  • 2008年07月03日 15:10
  • 428

开发跨浏览器的JavaScript

开发跨浏览器的JavaScript判定浏览器类型:if(document.uniqueID)如果为TRUE是IE,否则非IE。1向表中追加行2通过JAVASCRIPT设置元素的样式3设置元素的CLAS...
  • lyncn
  • lyncn
  • 2006年06月24日 16:59
  • 526

跨浏览器本地存储-Store.js

store.js是一个跨浏览器的数据本地存储 JS 框架,可以在不依赖 cookie 和 Flash 的情况下把数据保存在客户端。store.js最大的优点就是很好地解决了一些老版本浏览器不支持htm...
  • u012558554
  • u012558554
  • 2016年04月06日 10:03
  • 411

解决跨浏览器问题

1、渐进增强与优雅降级       优雅降级:优雅降级指的是为现代浏览器制作网站,然后保证为某些老版本浏览器提供基本可用的 体验。新特性在老版本浏览器中会降级,且一般会有一个分界点,声明不支持那些老...
  • chenzihan3417
  • chenzihan3417
  • 2015年03月06日 18:42
  • 666

开发winform项目注意事项

1、创建项目: 2、测试运行: 3、设置启动项: 4、程序入口:...
  • wzj0808
  • wzj0808
  • 2016年12月05日 17:56
  • 302

第一讲:跨终端Web解决方案(学习笔记)

1.React Native 2.移动到的应用有:WebAPP、NativeAPP、HybridAPP WebAPP:就是网站,HTML+CSS+JS,通过浏览器访问 NativeAPP:用原生...
  • luohuaxinyue
  • luohuaxinyue
  • 2015年12月11日 16:35
  • 682
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:开发跨浏览器JavaScript时要注意的问题
举报原因:
原因补充:

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