兼容性封装01--innerText和textContent属性

本文探讨了innerText和textContent属性的区别,指出innerText是IE早期引入但火狐某版本不支持,而textContent后出但IE低版本不支持。文章提供了解决方案,以实现兼容所有高级和低版本IE浏览器的策略。

区别

innerText属性:是最早微软给ie浏览器定义的属性,后来被所有浏览器使用,其中有一个版本的火狐不能使用。
textContent属性:后出来的属性,功能和innerText是一样,所有的高级浏览器能使用,ie低版本不能使用。

  • 解决方案:让所有高级浏览器使用textContent,ie低版本用innerText
  • 兼容性: 兼容ie低版本

高级浏览器: chrome firefox ie9及以上
低版本浏览器: ie 6 7 8

案例说明

css部分:

.box{
   
   
	width: 500px;
	height: 200px;
	background-color: #32CD32;
	border: 1px solid #fff;
}

html 部分:

<button class="btn"
### innerText textContent 的主要区别 #### 1. 显示内容与代码内容 `innerText` 的值依赖于浏览器的显示,而 `textContent` 依赖于代码的实际内容。例如,对于以下代码: ```html <span>第一个</span> <span>第二个</span> ``` `innerText` 的输出结果为“第一个 第二个”,而 `textContent` 的输出结果为“第一个 第二个”[^1]。 #### 2. 隐藏元素的处理 `innerText` 不会返回隐藏元素的文本,而 `textContent` 会。例如,对于以下代码: ```html <script>var a=111;</script> <span>第一个</span> <span>第二个</span> ``` `innerText` 的输出结果为“第一个 第二个”,而 `textContent` 的输出结果为“var a=111; 第一个 第二个”[^1]。 #### 3. 样式影响 `innerText` 受 CSS 样式的影响,例如 `visibility:hidden` 或 `display:none` 这些样式不会影响 `textContent`,但会影响 `innerText`。因此,即使元素被隐藏,`textContent` 仍然可以获取其中的文本[^3]。 #### 4. 性能差异 由于 `innerText` 受 CSS 样式的影响,它会触发重排(reflow),而 `textContent` 不会。这意味着在性能敏感的场景下,使用 `textContent` 更加高效[^2]。 #### 5. 兼容性 `innerText` 是由 IE 引入的 API,因此对 IE 浏览器的支持更友好。然而,`textContent` 作为标准方法,只支持 IE8+ 以上的浏览器。在最新的浏览器中,两者都可以使用,但在需要兼容低版本浏览器时,可能需要进行封装以确保兼容性。 #### 示例代码 以下示例展示了 `innerText` `textContent` 的行为差异: ```javascript const div = document.createElement('div'); div.innerHTML = '<span style="display: none;">隐藏内容</span>可见内容'; console.log(div.innerText); // 输出:可见内容 console.log(div.textContent); // 输出:隐藏内容 可见内容 ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值