九门宁生

导航

判断浏览器是否支持某属性 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="box">
    hello
  </div>
  <script>
    // // 如何知道。浏览器是否支持元素的某个属性
    // var box = document.getElementById('box');

    // // 当属性不存在的时候返回的是  undefined
    // console.log(typeof box.a);
    // // 当属性存在的时候返回的是 该属性的类型
    // console.log(typeof box.id);


    var box = document.getElementById('box');
    console.log(getInnerText(box));

    // 处理innerText的兼容性问题
    function getInnerText(element) {
      // 判断当前浏览器 是否支持元素的innerText属性，支持innerText 使用element.innerText获取内容
      // 如果不支持innerText属性，使用element.textContent获取内容
      
      if (typeof element.innerText === 'string') {
        return element.innerText;
      } else {
        return element.textContent;
      }
    }

    // box.innerHTML = 'hello world';

    // 设置内容的时候
    // innerText(textContent)       当设置不含标签的内容的时候应该使用innerText，效率高
    // innerHTML 
  </script>
</body>
</html>

 

posted on 2019-08-23 14:20  九门宁生  阅读(383)  评论(0)    收藏  举报