outerText和innerText屬性的區別例項介紹

antzone發表於2017-04-03

在開始文章技術細節的區別介紹之前，先來闡明一個標準上的區別:

outerText是符合W3C標準的，而innerText則是非標準的。

下面來先來看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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屬性獲取的值都是一樣的，沒錯，這兩個屬性在獲取值的功能上是完全一樣的，但是在設定內容的功能上有差別，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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不會，看如下截圖:

a:3:{s:3:\"pic\";s:43:\"portal/201704/03/232052j4i5pytphipi84vi.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

相關文章