zoukankan      html  css  js  c++  java
  • innerText和textContent区别以及兼容处理

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var box = document.getElementById('box');
        console.log(box.innerText); //获取内部文本
        console.log(box.textContent); //获取内部文本
        console.log(getInnerText(box));
        // 新版IE、谷歌 两个都支持
        // 新版火狐只支持textContent
        // 旧版IE只支持innerText
        //处理innerText的兼容性问题
        // 如何知道浏览器是否支持某个属性,当属性不存在的时候返回的是undefined,当属性存在的时候返回的是 该属性的类型
        function getInnerText(e) {
    
            // 判断当前浏览器是否支持元素的innerText属性
            //如果不支持innerText 就使用e.textContent获取内容
            if(typeof e.innerHTML === 'string'){
                return e.innerHTML;
            }else{
                return e.innerText;
            }
        }
    
    </script>
    </body>
    </html>
  • 相关阅读:
    MySQL教程22-字符串类型
    MySQL教程21-日期和时间类型
    MySQL教程20-小数类型
    MySQL教程19-整数类型
    MySQL教程18-数据类型简介
    ActiveMQ_topic
    ActiveMQ_消费者编码
    ActiveMQ_生产者编码
    ActiveMQ介绍
    管理docker容器
  • 原文地址:https://www.cnblogs.com/ella-li/p/14539909.html
Copyright © 2011-2022 走看看