javascript各种兼容性问题，不断更新

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
}

　　

　

 

 

　　

posted @ 2016-09-04 18:58  MrPat  阅读(171)  评论(0)  编辑  收藏  举报