ie6-ie8 不支持textContent支持innerText
chrome  支持textContent  innerText
fireFox    仅支持textContent不支持innerText

<body>
<div id="s1">
<p>ceshi </p>
</div>
</body> <script>
var s1=document.getElementById('s1');
console.log(s1.innerHTML); //输出 <p>ceshi </p>
console.log(s1.outerHTML); //输出<div id="s1">
<p>ceshi </p>
</div>
console.log(s1.innerText=s1.textContent); //输出ceshi
console.log(s1.outerText=s1.textContent); //输出ceshi
</script>

修改css样式  

一般用js修改样式,都是获取id,如

    var oDiv=document.getElementById("div1");
//alert(oDiv.style.width);
//获取非行间样式

但是這是修改行间的属性,还记得style有优先级吗,有时候我想改的不是行间的代码,改的是style标签的代码

就需要用到以下的函数

    //ie下
alert(oDiv.currentStyle.width);
//chrome 和firefox下
alert(getComputedStyle(oDiv,false).width);

这就涉及到兼容性问题

解决此问题就最好用if语句

    if(oDiv.currentStyle)
{
alert(oDiv.currentStyle.width);
}
else
{
alert(getComputedStyle(oDiv,false).width);
}

childNodes,firstElementChild,firstChild

首先先看看childnodes

<body>
<ul id="ul1">
<li></li>
<li></li>
</ul> </body> <script>
var oUl =document.getElementById("ul1");
for (var i=0;i<oUl.childNodes.length;i++)
{
if (oUl.childNodes[i].nodeType==1) //nodeType=3表示文本节点,即空格,=1就是标签节点
{
oUl.childNodes[i].style.background='red';
}
}
</script>

這里的childNodes.length为5

和我们想的2相差很大,原因是因为childnodes在ie可以正常显示为2,但是在谷歌和火狐浏览器中就显示5

因为谷歌和火狐浏览器把<li></li>前面的空格也当作一个childnode,叫文本节点。

为了避免這个问题

可以用children、

        for (var i=0;i<oUl.children.length;i++)
{
oUl.children[i].style.background='green';
}

这是全兼容的,

获取第一个节点有ie和火狐也有不同的函数,为了兼容性,可以写成這样

if (oUl.firstElemenChild)  //用于火狐和chrome
{
oUl.firstElementChild.style.background='black';
}
else
{
oUl.firstChild.style.background="black"; //用于ie5-7
}

  

 

  

javascript各种兼容性问题,不断更新的更多相关文章

  1. JAVASCRIPT 浏览器兼容性问题及解决方案列表

    JAVASCRIPT 浏览器兼容性问题及解决方案列表(1)获取HTML元素只兼容IE:document.all.hello hello 兼容所有: document.getElementById(“h ...

  2. JavaScript 事件兼容性写法

    1.以下是JavaScript事件兼容性写法,使用者可以随意使用,兼容所有浏览器.包括IE6(亲测) <!DOCTYPE html> <html> <head> & ...

  3. JavaScript 使用技巧(持续更新)

    JavaScript 使用技巧(持续更新) 类型检测 使用Object.prototype.toString.call(obj)的方式. 因为无论typeof还是instanceof都无法做到精确判断 ...

  4. 目前最全的浏览器/CSS选择器兼容性总结(2009-8-10更新)

    2009年2月24日,Safari 4.0 beta版正式发布,Safari从它的3.2版本开始就已经支持所有的CSS选择器(包括最新的CSS3).不过为了方便大家的工作,下面提供了最新版本的CSS选 ...

  5. javascript opacity兼容性随笔

    一.CSS兼容代码 .transparent { filter:alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* FireFox old version ...

  6. javascript event兼容性随笔

    一.前言 function ConvertEvent(e, element) { var event = e || window.event; var resultEvent = { event: e ...

  7. javascript Xml兼容性随笔

    一.前言 (function (window) { if (!window.jasen) { window.jasen = {}; } if (!window.jasen.core) { window ...

  8. javascript position兼容性随笔

    一.Javascript源码 if (!window.jasen.core.Position) { window.jasen.core.Position = {}; } function Size(w ...

  9. JavaScript及兼容性笔记

    1. Json to String JSON.stringify(jsonobj)//(IE8+,Chrome 1+,FF 3+) //参考 http://www.nowamagic.net/libr ...

随机推荐

  1. 关于git配合tortoiseGit的基础使用

    一定要自己写出来才能牢记,所以我来写一下 git确实比svn好用的多了,最起码只有一个文件夹用来标记版本信息比svn所有文件夹下都要放一个文件夹来标记版本信息先进多了,不然你不想要版本管理这些文件的时 ...

  2. System.Data.SqlClient.SqlException.Number的所有错误值列表

    在系统数据库(master或msdb或model)的架构(sys)的视图(messages)中: SELECT [message_id]      ,[language_id]      ,[seve ...

  3. 怎样进行Android UI元素设计

    Android UI元素里面包含了许多的内容,比如:该平台由操作系统.中间件.用户界面和应用软件组成,一个应用程序要想受用户喜爱,那么UI可不能差. Android为相似的编程名词引入了一些新的术语, ...

  4. [备忘]Visio中连接线交叉时跨线小弯的去掉方法

    连接线格式->行为->连接线->跨线->添加->从不 format->behavior…->Connector->Line jumps->Add: ...

  5. Swing多线程

    Swing的单线程开发机制 多线程开发,显然要比单线程开发有趣.高效.美妙得多.特别是在Java这种天生支持多线程的语言中,更是如此.可是,Java最重要的组成部分Swing确是单线程的! 并非只有S ...

  6. Builder模式(建造者模式)

    在设计模式中对Builder模式的定义是用于构建复杂对象的一种模式,所构建的对象往往需要多步初始化或赋值才能完成.那么,在实际的开发过程中,我们哪些地方适合用到Builder模式呢?其中使用Build ...

  7. DBA_Oracle冷备份和热备份的处理(概念)

    2014-07-27 Created By BaoXinjian

  8. [复变函数]第10堂课 3.2 Cauchy 积分定理

    0. 引言 (1) $\dps{\int_{|z-a|=\rho}\frac{1}{z-a}\rd z=2\pi i\neq 0}$: 有奇点 (在 $|z|>0$: 二连通区域内解析), 周线 ...

  9. UI设计原则

    一.一般原则 简单明了原则: 方便使用原则: 用户向导原则: 实时帮助原则: 自定义功能原则: 界面色彩原则: 二.Web系统适应原则 页面要瘦小 屏幕自适应 浏览器兼容 减少垂直滚动条 禁止水平滚动 ...

  10. MySQL 绿色版安装方法图文教程

    一.下载,这里使用绿色解压缩版 http://mirror.services.wisc.edu/mysql/Downloads/MySQL-5.1/mysql-noinstall-5.1.32-win ...