Javascript多种浏览器兼容写法分析第1/3页

示例代码：
<body>
<table border="1" cellspacing="0" cellpadding="0" id="apple" >
<tbody>
<tr>
<td id="banana" style="color:red" >不吃苹果</td>
</tr>
</tbody>
</table>
</body>

尽量采用W3C DOM 的写法

以前访问对象可能是：
document.all.apple 或者 apple
现在应该采用：
document.getElementById("apple") 以ID来访问对象，且一个ID在页面中必须是唯一的
document.getElementsByTagName("div")[0] 以标签名来访问对象

原来设置对象的属性可能是：
document.all.apple.width=100 或 apple.width=100
现在应该采用：
document.getElementById("apple").setAttribute("width","100")
document.getElementsByTagName("div")[0].setAttribute("width","100")
访问对象的属性则采用：
document.getElementById("apple").getAttribute("width")
document.getElementsByTagName("div")[0].getAttribute("width")

W3C DOM在IE下的一些限制

因为起先的IE占据整个浏览器95%的份额，没有竞争压力，所以这位老大就硬是要玩点另类，不完全按WEB标准来搞。

在IE下不能正确使用setAttribute来设置对象的style、class以及事件响应属性，
因此我还得按原来的点记法来访问和设置，以达到兼容各种浏览器的效果,如：
document.getElementById("banana").class
document.getElementById("banana").style.color
document.getElementById("banana").onclick
document.getElementById("banana").class="fruit"
document.getElementById("banana").style.color="blue"
document.getElementById("banana").onclick= function (){alert("我是香蕉")}

关于Firefox下的onload问题

function over(){
alert("页面加载完毕")
}

正常情况下，我们赋与onload响应函数是：
document.body.onload= over
但是在Firefox下这样无法执行，
所以我们都都采用下面这种形式：
window.onload=over

关于IE下TABLE无法插入新行的问题

IE下TABLE无论是用innerHTML还是appendChild插入<tr>都没有效果，而其他浏览器却显示正常。解决他的方法是，将<tr>加到TABLE的<tbody>元素中，如下面所示：

var row = document.createElement("tr");
var cell = document.createElement("td");
var cell_text = document.createTextNode("香蕉不吃苹果");
cell.appendChild(cell_text);
row.appendChild(cell);
document.getElementsByTagName("tbody")[0].appendChild(row);

当前1/3页 123下一页阅读全文

赞 (0)

相关推荐

  • JavaScript初学者建议：不要去管浏览器兼容

    如果可以回到过去的话,我会告诉自己这句话:"初学JavaScript的时候无视DOM和BOM的兼容性" 我初学时的处境 在我初学JavaScript的时候最头痛的就是浏览器兼容问题.在Firefox下面好好的代码放到IE就不能显示了,又或者是在IE能正常显示的代码在firefox又报错了. 前端开发工程师的职责就包括跨浏览器开发.所以我就在还不了解JS这门语言本身的时候去花时间学习浏览器兼容知识,这样会让JS学习难度增加.但是不能兼容主流浏览器的代码不能用在实际项目中. DOM和BOM

  • 多浏览器兼容的qq图片轮换效果javascript代码

    多浏览器兼容的qq图片轮换效果javascript代码

    js图片轮换效果代码_我们 22吨重挖掘机 中星九号直播 考后表情 1 2 3 function $(v){return document.getElementById(v)} var img = $("bimg").getElementsByTagName("div"); var td = $("simg").getElementsByTagName("td"); var text = $("info")

  • Javascript解决常见浏览器兼容问题的12种方法

    Javascript解决常见浏览器兼容问题的12种方法

    如果你不知道原因,不要过于担心,请研究CSS规则并查看这篇文章:使用CSS来修正一切: 20 +常见错误和修复. 如果这些也无效,您可以通过下面列出的12个javascript解决方案修复它,这样您的网页看起来就能跨越所有浏览器了! 在本文中,我们会揭开你在开发web应用是可能会遇到的12个最常见的CSS问题的javascript解决方案. 1. 自动匹配高度 自从我们抛弃了基于Table的页面布局后,创建同等高度栏目或内容盒子的视觉效果已然是一个挑战. 1.1 用jQuery设置匹配高度 这个

  • 多浏览器兼容的动态加载 JavaScript 与 CSS第1/2页

    在介绍ensure内部的实现之前,让我们先来看看其功能: ensure({ html: "popup.html", javascript: "popup.js", css: "popup.css" }, function() { Popup.show("hello world"); } ); 在这段代码中,ensure首先会确保popup.html.popup.js.popup.css这3个文件的加载,如果都没加载过ensur

  • Javascript 多浏览器兼容性问题及解决方案

    CSS 多浏览器兼容性问题及解决方案一.document.formName.item("itemName") 问题 问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]:Firefox 下,只能使用document.formName.elements["elementName"]. 解决方法:统

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

    序号 操作 分类 IE(6.0) FireFox(2.0) Mozilla(1.5) 当前浏览器 备注 1 "." 访问tag的固有属性 OK OK OK OK 2 "." 访问tag的用户定义属性eg: <input type="checkbox" myattr="test"> OK NO NO OK 可以用getAttribute函数 替代 3 obj.getAttribute 访问tag的固有属性 OK OK

  • javascript浏览器兼容教程之事件处理

    1. window.event [分析说明]先看一段代码 复制代码 代码如下: function et(){ alert(event);//IE: [object]} 以上代码在IE运行的结果是[object],而在Firefox无法运行. 因为在IE中event作为window对象的一个属性可以直接使用,但是在Firefox中却使用了W3C的模型,它是通过传参的方法来传播事件的,也就是说你需要为你的函数提供一个事件响应的接口. [兼容处理]添加对event判断,根据浏览器的不同来得到正确的ev

  • Javascript 多浏览器兼容总结(实战经验)

    一.document.formName.item("itemName") 问题 问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements["elementName"]:Firefox下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formName

  • JavaScript Event学习第二章 Event浏览器兼容性

    在这里提出的事件,当他们发生在一个确定的HTML元素上的时候,他们的名字能够被大多数的浏览器所识别.也就是说,浏览器会查找你为这个HTML元素所注册的事件处理程序的脚本,而且会被立即执行.      一开始只有为数很少的一些事件.这些事件在几乎所有的JavaScript浏览器都能运行,即使是那些非常古老的.需要注意的是那些早期的事件只能工作在链接或者表单上,有时候也能运行在整个窗口上,但是其他的大多数HTML元素不行.      时代变迁,很多新的事件也给大家介绍过了.第四代浏览器和更高级的浏览

  • Javascript多种浏览器兼容写法分析第1/3页

    示例代码: <body> <table border="1" cellspacing="0" cellpadding="0" id="apple" > <tbody> <tr> <td id="banana" style="color:red" >不吃苹果</td> </tr> </tbody>

  • Javascript字符串浏览器兼容问题分析

    本文实例分析了Javascript字符串浏览器兼容问题.分享给大家供大家参考.具体分析如下: 先看下不兼容的写法,若我想获取某个字符串的第几位 复制代码 代码如下: var str='aavvvcc'; console.info(str[0]); 这种写法 在IE 7以下的浏览器都不兼容,以下提供浏览器全兼容的方式 复制代码 代码如下: var str='aavvvcc'; console.info(str.charAt(1)); 使用charAt() 就可以获取字符串中某个字符,并且全部兼容.

  • 谈谈JavaScript中浏览器兼容问题的写法小议

    前言 JavaScript中很多坑,其中对浏览器的兼容也是一个问题,本文就简略的归纳了部分针对浏览器兼容问题的写法的例子,旨在便于查找.如果读者有什么好的意见建议,请留言交流,谢谢! window窗口大小 1.在IE9+.Chrome.Firefox.Opera以及Safari中 window.innerHeight获取浏览器窗口的内部高度 window.innerWidth获取浏览器窗口的内部宽度 var msg = "窗口宽度:" + window.innerHeight + &q

  • 源码解读jQ中浏览器兼容模块support第1/2页

    源码解读jQ中浏览器兼容模块support第1/2页

    前言 jQuery的属性support是判断浏览器之间是否兼容的模块 ,该模块包含了leadingWhitespace,tbody,htmlSerialize,style,hrefNormalized,opacity,cssFloat,checkOn,optSelected,getSetAttribute-.等兼容问题,所有的这些属性也只是jQuery内部会用到,因为jQ内部一些模块需要对这些东西进行判断, 就直接写成了一个support模块, 可以供我们, 但是我们写代码的时基本都没用到啊,

  • JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍

    •原理: •高级浏览器支持forEach方法 语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: •forEach:用来遍历数组中的每一项:这个方法执行是没有返回值的,对原来数组也没有影响: •数组中有几项,那么传递进去的匿名回调函数就需要执行几次: •每一次执行匿名函数的时候,还给其传递了三个参数值:数组中的当前项item,当前项的索引index,原始数组input: •理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行

  • 浏览器兼容的JS写法总结

    一.元素查找问题 1. document.all[name]   (1)现有问题:Firefox不支持document.all[name]   (2)解决方法:使用getElementsByName(name),getElementById(id)等来替代. 2. 集合类对象问题   (1)现有问题:IE中对许多集合类对象取用时可以用 (),但在Firefox只能用[].       如:IE中可以使用document.forms("formName")来返回名字为"form

  • javascript 按键事件(兼容各浏览器)

    第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown.onkeypress和onkeyup这三个事件句柄.一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup. 在这3种事件类型中,keydown和keyup比较底层,而keypress比较高级.这里所谓的高级是指,当用户按下shift + 1时,keypress是对这个按键事件进行解析后

  • JavaScript判断浏览器和hack滚动条的写法

    判断各大浏览器内核: var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器 var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") >

随机推荐