innerText的兼容性处理

最新推荐文章于 2020-06-21 16:47:37 发布

原创最新推荐文章于 2020-06-21 16:47:37 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#innerText #兼容处理 #typeof

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种检测浏览器是否支持特定HTML元素属性的方法，通过使用typeof操作符检查属性的存在性。并提供了一个处理innerText兼容性的实用函数，确保跨浏览器的一致表现。

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
	}
}