innerText的兼容性处理

李不言，

于 2018-12-14 14:49:27 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： innerText 兼容处理 typeof

本文链接：https://blog.youkuaiyun.com/lj940628/article/details/85003670

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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