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

时间 2019-11-10 标签 javascript 各类兼容性问题不断更新

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

<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样式　　css

通常用js修改样式，都是获取id,如java

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

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

就须要用到如下的函数chrome

    //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,firstChildspa

首先先看看childnodesfirefox

<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为5code

和咱们想的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
}