outerText和innerText屬性的區別實例介紹
在開始文章技術細節的區別介紹之前，先來闡明一個標準上的區別:
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不會，看:
聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至201542412@QQ.com舉報，一經查實，本站將立刻刪除。
相關推薦
-
js prototype屬性使用代碼實例
關于rototy屬性的用法這里不多介紹了，具體可以參閱jvscrit rototy原型一章節。下面就分享一段關于rototy屬性使用的代碼實例，需要的朋友可以做一下參考。代碼如
-
js獲取偽元素選擇器規定的內容代碼實例
關于偽元素選擇器可以參閱CSS bfor/::bfor一章節。下面介紹一下如何利用js獲取偽元素選擇器定義的內容，這種需求在以前可能比較少。但是隨著瀏覽器的進步，偽元素選擇器的實用會越來越廣
-
通過鼠標拖動選取指定數字代碼實例
在不少的應用中，選取數字的時候可以通過鼠標拖動來實現，這樣的效果人性化的很。下面就分享一個插件實現了這樣的功能，這就是jRng，它是利用jQury實現的。一.HTML代碼部分:首先載入jQur
-
js實現的獲取選中文本代碼實例
本章節介紹一下如何或者被選中的文本內容。非常的簡單，需要的朋友可以做一下參考，代碼實例如下:
-
nodeJS代碼實現計算交社保代碼實例
下面是一段比較實用的代碼實例，是關于交社保的計算。代碼實例如下:fuckShbo: function (rq, rs, nxt) { //每個月1800的社保 vr dy = (18
