如何在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.tw/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.tw/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.tw/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+ 次瀏覽

啟動您的職業生涯

透過完成課程獲得認證

開始學習
廣告