javascript各類兼容性問題，不斷更新

時間 2019-11-10

標籤 javascript 各類兼容性問題不斷更新欄目 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
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。