如何在JavaScript中更改属性的值？

在本教程中，我们将学习如何在 JavaScript 中更改属性的值。为了构建 Web 应用程序，大多数程序员使用三种语言：HTML、CSS 和JavaScript。HTML 用于创建网页的基础，CSS 用于样式设置，而 JavaScript 则为网页添加动态行为。

用户在许多网站上都看到过这种情况：只需点击按钮，元素的样式就会发生变化。我们可以使用 JavaScript 来实现这一点。

使用 JavaScript，让我们看看如何为 HTML 元素设置新的属性或动态更改属性值。

要更改元素的属性值，我们需要使用元素 ID、类名或其他任何方法在 JavaScript 中访问该元素。我们可以使用.attribute_name访问属性，并为其赋值。

语法

以下是更改任何属性值的通用语法。

element.attribute = new_value

参数

  • attribute − 属性的名称。

  • new_value − 访问属性的新值。

更改样式属性值

在本节中，我们将使用 JavaScript 更改 div 元素的背景颜色。我们可以简单地访问元素的 style 属性。style 属性还包含各种用于设置元素样式的属性，例如字体大小、颜色、背景颜色、高度、宽度等，以及许多其他属性。

语法

请按照以下语法更改样式属性值。

let element = document.getElementById( "element_id" );
element.style.backgroundColor = ‘color’;

示例

在下面的示例中，我们在 HTML 中创建了<div>元素，并在<script>标签中使用 ID 访问它。我们创建了一个按钮，当用户点击它时，它将更改 div 的背景颜色。要更改背景颜色，我们访问 style 属性的backgroundColor属性并赋值。

<html>
<head>
</head>
<body>
   <h2>Change the attribute value using JavaScript.</h2>
   <h4>Click the button to change the <i> background-color <i> of the below text.</h4>
   <div id = "fonts">change color of this.</div>
   <button onclick = "changeBackground()">change background</button>
   <script>
      function changeBackground() {
         let fontsDiv = document.getElementById("fonts");
         fontsDiv.style.backgroundColor = 'green'; // change background color of div element using style attribute
      }
   </script>
</body>
</html>

通过更改 src 属性值来切换图像

在本节中，我们将学习如何更改 HTML 的<img>元素的src属性的值。与上一节一样，我们将使用id访问图像元素，并替换特定元素的src属性值。

此外，用户在许多应用程序中都看到过这种功能，当他们点击按钮时，图像会发生变化。

用户可以按照以下语法更改图像 src 属性的值。

语法

let imgDiv = document.getElementById( "image_id" ); // access the image using id
imgDiv.src = 'new_image_URL'

示例

在下面的示例中，我们在屏幕上渲染了图像。当用户点击更改图像按钮时，它将使用新的 URL 替换图像的src属性的值，用户可以在屏幕上看到新的图像。

<html>
<head>
</head>
<body>
   <h2>Change the attribute value using JavaScript.</h2>
   <h4>Changing the <i> src attribute value </i> of below image on button click.</h4>
   <img id = "img" src = "https://tutorialspoint.com/python_pillow/images/tutorials_point.jpg" alt = "demo">
   <button onclick = "changeImage()">change Image</button>
   <script>
      function changeImage() {
         let imgDiv = document.getElementById("img");
         imgDiv.src = 'https://tutorialspoint.com/images/QAicon-black.png'; // replace the image on button click.
      }
   </script>
</body>
</html>

为元素设置新属性

在本教程的这一部分中，我们将学习 JavaScript 的setAttribute()方法。我们已经学习了如何更改属性的值。如果我们需要向 HTML 元素添加一个具有其值的新属性怎么办？在这种情况下，我们必须使用setAttribute()方法。

语法

以下是使用 setAttribute() 方法的语法：

let element = document.getElementById( "element_id" );
element.setAttribute( "attribute", "value" );

参数

  • attribute − 新属性的名称。

  • value − 新属性的值。

示例

在下面的示例中，我们创建了<img>元素和可点击按钮。当用户点击按钮时，它将向<img>元素添加一个名为 height 的新属性，其值为 200px。因此，图像高度将变小。

<html>
<head>
</head>
<body>
   <h2>set new Attribute to the HTML element using JavaScript.</h2>
   <h4>Adding the <i> height attribute </i> to the below image and set it to 200px.</h4>
   <img id = "img" src = "https://tutorialspoint.com/python_pillow/images/tutorials_point.jpg" alt="demo">
   <button onclick = "changeImage()">change Image height</button>
   <script>
      function changeImage() {
         let imgDiv = document.getElementById( "img" );
         imgDiv.setAttribute( "height", "200px" ); // set height attribute to image div
      }
   </script>
</body>
</html>

在本教程中，我们学习了如何更改现有属性的值。此外，我们还学习了如何使用 JavaScript 向任何 HTML 元素添加具有值的新属性。程序员需要学习如何使用 JavaScript 为网页添加行为，我们已经学习了这方面的一些知识。

更新于：2022年8月8日

22K+ 次浏览

启动您的职业生涯

通过完成课程获得认证

开始学习
广告