html代码如下
<div id="box">
hello
</div>
如何知道,浏览器是否支持元素的某个属性呢?
var box = document.getElementById('box');
console.log(typeof box.a) // ====> undefined
console.log(typeof box.id) // 返回属性的类型
使用typeof方法检测浏览器是否支持元素的某个属性:
- 当属性不存在的时候返回的是undefined
- 当属性存在的时候返回的是 该属性的类型
通过这种方式可以写出innerText的兼容处理代码
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
}
}