在JavaScript編程中,innerText是一個非常有用的屬性。它可以用于讀取或者更改指定元素的文本內(nèi)容。如果你想實(shí)現(xiàn)動態(tài)修改頁面文本內(nèi)容,innerText屬性會是你的不二選擇。
比如,你想在一個網(wǎng)站上動態(tài)顯示當(dāng)前時間,如下所示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>動態(tài)顯示當(dāng)前時間</title> </head> <body> <h1 id="nowTime"></h1> <script> function showTime(){ var now = new Date(); var h = now.getHours(); var m = now.getMinutes(); var s = now.getSeconds(); var timeStr = h +":"+ m +":"+ s; document.getElementById("nowTime").innerText = timeStr; } setInterval(showTime, 1000); </script> </body> </html>
在上述代碼中,我們首先使用HTML標(biāo)簽<h1>來創(chuàng)建一個空白元素,通過控制該元素的innerText屬性來動態(tài)顯示當(dāng)前時間。我們編寫了一個showTime()函數(shù),在其中獲取并格式化當(dāng)前系統(tǒng)時間的小時、分鐘和秒,將其組成一個時間字符串,最后將其賦值給id為"nowTime"的元素,實(shí)現(xiàn)了動態(tài)更新頁面時間的效果。
除了更改元素的innerText屬性,我們還可以使用它來驗(yàn)證輸入表單。比如,以下代碼可以驗(yàn)證用戶輸入的昵稱是否為空:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>驗(yàn)證輸入表單</title> </head> <body> <form id="myForm"> <p>昵稱:<input type="text" name="nickname" id="nickname"></p> <p><input type="button" value="提交" onclick="checkForm()"></p> </form> <script> function checkForm(){ var nickname = document.getElementById("nickname").innerText; if(nickname.length == 0){ alert("昵稱不能為空!"); }else{ alert("昵稱有值!"); } } </script> </body> </html>
在這段代碼中,我們使用了JavaScript中的DOM方法,通過獲取昵稱輸入框的id屬性,得到此時輸入框中的值,再使用innerText屬性判斷輸入框是否為空。如果為空,彈窗提示昵稱不能為空,否則提示昵稱有值。
最后,需要注意的是,innerText屬性只對可見元素(display屬性不為"none")返回文本內(nèi)容,不考慮元素的CSS樣式是否會影響到顯示。如果你需要獲取元素內(nèi)部的全部文本內(nèi)容,包括所有子元素(比如,<p><strong>Hello</strong> World</p>),那么可以使用textContent屬性。
以上是關(guān)于JavaScript中innerText屬性的介紹。如有錯誤或需要補(bǔ)充的地方,歡迎留言指正。