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

2016-02-19 15:40 2 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属性

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

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

//下面的写法保证除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’”);

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

}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)。

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

延伸阅读
标签: 软件教程
谷歌浏览器是一款由谷歌公司开发的浏览器。谷歌浏览器是一款基于其他开源软件所撰写的。下面小编为大家分享一篇谷歌浏览器调试javascript的教程,希望帮助大家 首先我们打开开发者工具,你可以直接在页面上点击右键,然后选择审查元素或者在Chrome的工具中找到或者你直接记住这个快捷方式: Ctrl+Shift+I (或者Ct...
标签: 浏览器
QQ浏览器跨屏穿越怎么用 QQ浏览器跨屏穿越怎么用?QQ浏览器推出新功能跨屏穿越,可以帮大家将网页发送到任何其他设备:手机、iPad或另外一台电脑,下面pc软件下载站小编就教大家使用方法。 1、首先,安装最新的浏览器(Android、iPhone、iPad、PC) 2、然后,在发送和接受设备的QQ浏览器上,均使用相同的QQ帐号登录(如何登录?) ...
标签: Web开发
最近在为自己做个新站,想到了些效果,实现时碰到了些小麻烦,比如这个 inline block。所幸大多数问题都解决了,所以写出来分享一下。 我们在制作网页时,有时会希望一个元素既能像 block 一样定义宽度和高度,又可以像普通的 inline 一样不断行。例如下面这张图片中红线标出的地方: 通常我们实现这样的效果会使用这样的代码: ...
标签: Web开发
    你知道世界上有多少种浏览器吗?除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外,世界上还有近百种浏览器。     几天前,浏览器家族有刚诞生了一位小王子,就是Google推出的Chrome浏览器。由于Chrome出生名门,尽管他还是个小家伙,没有人敢小看他。以后,咱们常说浏览器的“四大才子”就得改称...
标签: Web开发
使用方法: 访问"imagesee.htm的网址+?pic=图片的网址&page=该图片相关网页的网址" 即可,其中page参数可以忽略。 关于ImageSee: ImageSee是开放源代码的网页图片浏览器,由JavaScript写成,是一个完全静态网页。同时支持IE Firefox Opera浏览器。  透过ImageSee,您可以方便的对网上的高清图片(大图片)进行浏览...

经验教程

264

收藏

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