兼容集合

针对h5标签，低版本浏览器不识别

解决方法一：

header,
nav,
section,
aside,
article,
footer { display: block; }

 解决方法二：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            article {
                color: #008FD8;
                font-size: 36px;
            }
        </style>
        <script type="text/javascript">
            (function() {
                if (!
                /*@cc_on!@*/
                0) return;
                var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, meter, nav, output, progress, section, time, video".split(", ");
                var i = e.length;
                while (i--) {
                    document.createElement(e[i]);
                }
            })();
        </script>
    </head>
    <body>
        <article>Harold</article>
    </body>
</html>

 

 

 

innerText兼容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="content">

        </div>
        <script type="text/javascript">
            var content = document.getElementById("content");

//            兼容所有浏览器的innerText读取的方法
            function getInnerText (element) {
                return (typeof element.textContent == "string") ? element.textContent : element.innerText;
            }
            console.log(getInnerText);

//            兼容所有浏览器的innerText的设置方法
            function setInnerText (element, text) {
                if (typeof element.textContent == "string") {
                    element.textContent = text;
                } else {
                    element.innerText = text;
                }
            }
            setInnerText(content, "Harold")
        </script>
    </body>
</html>

 

修复document.getElementById()在低版本浏览器出现的bug（）

bug：（IE7）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <a href="#" name="target">这是错误的元素</a>
        <p id="target">这是正确的元素</p>
        <button id="button" type="button">click</button>
        <script type="text/javascript">
            var btn = document.getElementById("button");
            btn.onclick = function() {
                var target = document.getElementById("target");
                console.log(target.innerHTML);
            }
        </script>
    </body>
</html>

解决方法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <a href="#" name="target">这是错误的元素</a>
        <p id="target">这是正确的元素</p>
        <button id="button" type="button">click</button>
        <script type="text/javascript">
            var getElementById = function(id) {
                var el = document.getElementById(id);
                if(!+"\v1") {  //低版本IE 识别是\v1，其他浏览器识别是1
                    if(el && el.id === id) {
                        return el;
                    } else {
                        var els = document.all[id],
                            n = els.length;
                        for (var i = 0; i < n; i++) {
                            if (els[i].id === id) {
                                return els[i];
                            }
                        }
                    }
                }
                return el;
            };
            console.log(getElementById("target"));
        </script>
    </body>
</html>

 

 

 

 

 

 

 

 

 

1

posted @ 2020-06-05 13:10  嘆世殘者——華帥  阅读(126)  评论(0)    收藏  举报