HTML DOM innerText 属性

htmlweb developmentfront end technology更新于 2025/9/18 10:52:17

HTML DOM innerText 属性返回并允许我们修改 HTML 元素的内部文本内容。

语法

以下是语法 −

1. 返回内部文本

object.innerText

2. 设置内部文本

object.innerText=”text”

示例

让我们看一个 innerText 属性的示例 −

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      text-align:center;
   }
   .box{
      background-color:#347924;
      width:100px;
      padding:10px;
      text-align:center;
      font-weight:bold;
      font-size:1.5rem;
      color:white;
      margin:1rem auto;
   }
</style>
</head>
<body>
<h1>innerText property Example</h1>
<div class="box">
</div>
<button onclick="writeHi()">Write Hi</button>
<button onclick="writeHello()">Write Hello</button>
<script>
   function writeHi() {
      var outerBox = document.querySelector('.box');
      outerBox.innerText ='HI';
   }
   function writeHello() {
      var outerBox = document.querySelector('.box');
      outerBox.innerText ='HELLO';
   }
</script>
</body>
</html>