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

2016-02-19 15:40 5 1 收藏

今天图老师小编要向大家分享个开发跨浏览器JavaScript时要注意的问题教程,过程简单易学,相信聪明的你一定能轻松get!

【 tulaoshi.com - Web开发 】

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属性

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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”);

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

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

}

7、          insertRow,insertCell,deleteRow

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

来源:http://www.tulaoshi.com/n/20160219/1610170.html

延伸阅读
标签: Web开发
最近在为自己做个新站,想到了些效果,实现时碰到了些小麻烦,比如这个 inline block。所幸大多数问题都解决了,所以写出来分享一下。 我们在制作网页时,有时会希望一个元素既能像 block 一样定义宽度和高度,又可以像普通的 inline 一样不断行。例如下面这张图片中红线标出的地方: 通常我们实现这样的效果会使用这样的代码: ...
标签: 浏览器
QQ浏览器跨屏穿越怎么用 QQ浏览器跨屏穿越怎么用?QQ浏览器推出新功能跨屏穿越,可以帮大家将网页发送到任何其他设备:手机、iPad或另外一台电脑,下面pc软件下载站小编就教大家使用方法。 1、首先,安装最新的浏览器(Android、iPhone、iPad、PC) 2、然后,在发送和接受设备的QQ浏览器上,均使用相同的QQ帐号登录(如何登录?) ...
标签: 软件教程
谷歌浏览器是一款由谷歌公司开发的浏览器。谷歌浏览器是一款基于其他开源软件所撰写的。下面小编为大家分享一篇谷歌浏览器调试javascript的教程,希望帮助大家 首先我们打开开发者工具,你可以直接在页面上点击右键,然后选择审查元素或者在Chrome的工具中找到或者你直接记住这个快捷方式: Ctrl+Shift+I (或者Ct...
java.applet包的AppletContext类包含如下两个成员方法:getApplet和getApplets。使用这两个方法,Applet能够寻找到其他的Applet并调用它们的方法。不过这是以满足如下安全条件为前提的: 所有Applet位于同一服务器的同一目录。 所有Applet运行在同一页面且位于同一浏览器窗口内。 或许为Applet加上这些安全限制都有着很充分...
标签: Web开发
    我们在制作网页时,有时会希望一个元素既能像 block 一样定义宽度和高度,又可以像普通的 inline 一样不断行。例如下面这张图片中红线标出的地方:     通常我们实现这样的效果会使用这样的代码: a href=”#”img src=”….” alt=”….” //a     这样虽然可以达到目的,但相对来说...

经验教程

539

收藏

7
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部