如何通过单击 JavaScript 中的按钮来更改文本和图像？

介绍

JavaScript是一种用于Web开发的编程语言，可以与HTML和CSS一起使用。在Web开发过程中，通常需要在网页中添加按钮来控制页面的交互。在本文中，我们将学习如何通过单击JavaScript中的按钮来更改文本和图像。

如何创建按钮

要在网页中创建按钮，我们需要使用HTML中的<button>标签。该标签包含按钮上要显示的文本。以下是基本的<button>标签:

<button>按钮</button>

我们可以使用CSS样式表来更改按钮的外观。下面是一个基本的CSS按钮样式：

button {
  background-color: #4CAF50; /* 绿色背景 */
  border: none; /* 无边框 */
  color: white; /* 文本为白色 */
  padding: 15px 32px; /* 按钮内填充 */
  text-align: center; /* 文本居中 */
  text-decoration: none; /* 无下划线 */
  display: inline-block; /* 行内块元素 */
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer; /* 鼠标悬停时显示手型光标 */
}

如何更改文本

当用户单击按钮时，我们可以使用JavaScript来更改网页中的文本。下面是一个基本的JavaScript函数，该函数在单击按钮时将文本更改为“Hello World”：

function changeText() {
  document.getElementById("text")[xss_clean] = "Hello World";
}

这个函数使用JavaScript中的document.getElementById()方法来获取引用要更改的文本。该方法使用文本的ID属性来获取文本元素。在以下HTML代码中，我们为文本元素设置了一个ID属性：

<p id="text">要更改的文本</p>

在函数中，我们使用innerHTML属性来更改文本。在本例中，我们将文本更改为Hello World。我们将innerHTML属性设置为HTML格式的字符串。

最后，我们将函数与按钮关联。以下是将按钮与函数关联的HTML代码：

<button onclick=changeText()">更改文本</button>

您可以使用onclick属性将JavaScript函数与按钮关联。在本例中，我们将使用changeText()函数来更改文本。

如何更改图像

要在网页中更改图像，我们可以使用JavaScript中的getElementById()方法获取图像元素，然后使用src属性更改图像的路径。以下是实现此目的的基本JavaScript函数：

function changeImage() {
  document.getElementById("image").src = "new_image.jpg";
}

在此函数中，我们使用getElementById()方法获得对要更改的图像的引用。在以下HTML代码中，我们为图像元素设置了一个ID属性：

<img id="image" src="old_image.jpg">

在函数中，我们将src属性设置为新图像的路径，如下所示：

document.getElementById("image").src = "new_image.jpg";

最后，我们将函数与按钮关联。以下是将按钮与函数关联的HTML代码：

<button onclick=changeImage()">更改图像</button>

在本例中，我们将使用changeImage()函数来更改图像。

结论

JavaScript是一种强大的编程语言，可以与HTML和CSS一起用于动态网页的开发。在本文中，我们学习了如何通过单击JavaScript中的按钮来更改文本和图像。通过创建按钮、使用JavaScript函数和将函数与按钮关联，您可以使用户能够更轻松地与您的网页交互。