outerText和innerText属性的区别实例介绍

2023-12-04 13:48:56 前端笔记 179

在开始文章技术细节的区别介绍之前，先来阐明一个标准上的区别:

outerText是符合W3C标准的，而innerText则是非标准的。

下面来先来看一段代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="/" />
<title>实例</title>
<script type="text/javascript">
window.onload=function(){
  var top=document.getElementById("top");
  var bottom=document.getElementById("bottom");
  var str="";
  str=str+top.outerText;
  str=str+"n";
  str=str+bottom.innerText;
  alert(str);
}
</script>
</head>
<body>
<div id="top">实例</div>
<div id="bottom">实例</div>
</body>
</html>

从上面的代码来看，使用outerText和innerText属性获取的值都是一样的，没错，这两个属性在获取值的功能上是完全一样的，但是在设置内容的功能上有差别，代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="/" />
<title>实例</title>
<style>
div{
  color:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var top=document.getElementById("top");
  var bottom=document.getElementById("bottom");
  top.outerText="<b>实例</b>";
  top.innerText="<b>实例</b>";
}
</script>
</head>
<body>
<div id="top">实例</div>
<div id="bottom">实例</div>
</body>
</html>

在上面的代码可以明显看出两个属性在设置属性值上是有明显的差异的。

outerText属性可以将原来元素节点被文本节点替换掉，而innerText不会，看:

outerText和innerText属性的区别实例介绍第2张