JS修改屬性詳解

一、JS修改屬性值

JS可以通過直接修改屬性的值，在頁面中動態地改變屬性的特性，下面是一個修改文本框屬性value的示例：

  <!DOCTYPE html>
  <html>
    <head>
      <title>JS修改屬性值示例</title>
    </head>
    <body>
      <input id="myInput" type="text" value="初始值">
      <button onclick="changeValue()">修改value屬性值</button>
      <script>
        function changeValue() {
          var input = document.getElementById("myInput");
          input.value = "修改後的值";
        }
      </script>
    </body>
  </html>

在這個示例中，通過javascript代碼獲取input元素並修改其value屬性的值，當用戶點擊按鈕時，文本框中文字會被修改為「修改後的值」。

二、JS修改樣式屬性

除了修改屬性值，JS還可以修改元素的樣式屬性，這樣可以動態地改變元素的外觀，下面是一個修改樣式屬性color的示例：

  <!DOCTYPE html>
  <html>
    <head>
      <title>JS修改樣式屬性示例</title>
      <style>
        #myDiv {
          color: red;
        }
      </style>
    </head>
    <body>
      <div id="myDiv">初始文本內容</div>
      <button onclick="changeStyle()">修改樣式</button>
      <script>
        function changeStyle() {
          var div = document.getElementById("myDiv");
          div.style.color = "blue";
        }
      </script>
    </body>
  </html>

在這個示例中，初始化時文本的顏色是紅色的，點擊按鈕時，通過JS代碼獲取div元素並修改其color樣式屬性的值為「blue」，從而實現動態修改文本顏色的效果。

三、JS修改屬性名

在一些複雜的情況下，JS需要修改元素的屬性名，下面是一個修改元素id屬性名的示例：

  <!DOCTYPE html>
  <html>
    <head>
      <title>JS修改屬性名示例</title>
    </head>
    <body>
      <div id="myDiv">初始文本內容</div>
      <button onclick="changeId()">修改id屬性名</button>
      <script>
        function changeId() {
          var div = document.getElementById("myDiv");
          div.id = "newDiv";
        }
      </script>
    </body>
  </html>

在這個示例中，用戶點擊按鈕後，通過JS的代碼獲取div元素並修改其id屬性名的值為「newDiv」，從而實現動態修改HTML元素id屬性名的效果。

四、使用JS修改超鏈接的href屬性值

在網頁中，超鏈接是常用的元素類型，JS可以通過修改超鏈接的href屬性值實現動態修改鏈接的地址，下面是一個修改鏈接地址的示例：

  <!DOCTYPE html>
  <html>
    <head>
      <title>JS修改鏈接地址示例</title>
    </head>
    <body>
      <a id="myLink" href="https://www.baidu.com">點擊訪問百度</a>
      <button onclick="changeHref()">修改鏈接地址</button>
      <script>
        function changeHref() {
          var link = document.getElementById("myLink");
          link.href = "https://www.google.com";
        }
      </script>
    </body>
  </html>

在這個示例中，通過JS的代碼獲取鏈接元素並修改其href屬性的值為「https://www.google.com」，從而實現動態修改鏈接地址的效果。

五、JS修改屬性名稱

除了修改屬性的值和屬性名，JS還可以修改HTML元素的屬性名稱，下面是一個修改元素align屬性名稱的示例：

  <!DOCTYPE html>
  <html>
    <head>
      <title>JS修改屬性名稱示例</title>
    </head>
    <body>
      <div id="myDiv" align="center">初始文本內容</div>
      <button onclick="changeAttributeName()">修改屬性名稱</button>
      <script>
        function changeAttributeName() {
          var div = document.getElementById("myDiv");
          div.setAttribute("align", "left");
        }
      </script>
    </body>
  </html>

在這個示例中，用戶點擊按鈕後，通過JS的代碼獲取div元素並使用setAttribute函數修改其align屬性名稱的值為「left」，從而實現動態修改HTML元素屬性名稱的效果。

六、JS修改display屬性

JS可以通過修改元素的display屬性值，動態改變元素的顯示或隱藏狀態，下面是一個修改display屬性的示例：

  <!DOCTYPE html>
  <html>
    <head>
      <title>JS修改display屬性示例</title>
    </head>
    <body>
      <div id="myDiv" style="display: block">初始文本內容</div>
      <button onclick="changeDisplay()">修改display屬性</button>
      <script>
        function changeDisplay() {
          var div = document.getElementById("myDiv");
          div.style.display = "none";
        }
      </script>
    </body>
  </html>

在這個示例中，當用戶點擊按鈕時，通過JS代碼獲取div元素並修改其display屬性的值為「none」，從而實現動態隱藏這個元素的效果。

七、JS修改樣式中的屬性值

JS可以通過修改元素樣式屬性中的值，動態改變元素的外觀效果，下面是一個修改border屬性值的示例：

  <!DOCTYPE html>
  <html>
    <head>
      <title>JS修改樣式中的屬性值示例</title>
      <style>
        #myDiv {
          border: 1px solid red;
        }
      </style>
    </head>
    <body>
      <div id="myDiv">初始文本內容</div>
      <button onclick="changeBorder()">修改border屬性值</button>
      <script>
        function changeBorder() {
          var div = document.getElementById("myDiv");
          div.style.border = "2px dashed blue";
        }
      </script>
    </body>
  </html>

在這個示例中，初始化時div元素的邊框樣式是1像素的實線紅色邊框，用戶點擊按鈕後，通過JS代碼獲取div元素並修改其border樣式屬性的值為「2像素的虛線藍色邊框」，從而實現改變元素外觀的效果。

八、JS修改屬性值的方法

JS可以通過多種方法修改HTML元素的屬性值，包括通過.屬性名、setAttribute()、style屬性等方式，下面是一個示例展示其中的兩種修改方法：

  <!DOCTYPE html>
  <html>
    <head>
      <title>JS修改屬性值的方法示例</title>
    </head>
    <body>
      <div id="myDiv" title="初始標題">初始文本內容</div>
      <button onclick="changeAttrValue()">修改屬性值</button>
      <script>
        function changeAttrValue() {
          var div = document.getElementById("myDiv");
          div.title = "修改後的標題";
          div.setAttribute("title", "通過setAttribute修改後的標題");
        }
      </script>
    </body>
  </html>

在這個示例中，用戶點擊按鈕後，通過JS代碼分別通過.屬性名和setAttribute()兩種方式修改div元素的title屬性值。其中，.屬性名的方式是修改div元素title屬性的值為「修改後的標題」；而setAttribute()的方式是修改div元素title屬性的值為「通過setAttribute修改後的標題」。

九、JS修改屬性無法push

在JS中，某些屬性是無法直接使用push()方法進行添加的，下面是一個修改classList屬性的示例，演示了如何使用classList的add()和remove()方法而不是push()方法：

  <!DOCTYPE html>
  <html>
    <head>
      <title>JS修改屬性無法push示例</title>
      <style>
        .myClass {
          color: red;
          font-weight: bold;
        }
      </style>
    </head>
    <body>
      <p id="myPara" class="myClass">初始文本內容</p>
      <button onclick="addClass()">添加class樣式</button>
      <button onclick="removeClass()">刪除class樣式</button>
      <script>
        function addClass() {
          var paras = document.getElementById("myPara").classList;
          paras.add("newClass");
        }
        function removeClass() {
          var paras = document.getElementById("myPara").classList;
          paras.remove("myClass");
        }
      </script>
    </body>
  </html>

在這個示例中，用戶可以通過點擊按鈕來使用classList的add()方法來添加新的class樣式或者使用remove()方法來刪除已有的class樣式。classList屬性是一個只讀屬性，因此不能使用push()方法來修改屬性值。

十、JS修改div屬性

在處理DOM元素的過程中，JS可以修改HTML元素中的所有屬性，包括div元素，下面是一個修改div元素背景顏色的示例：

  <!DOCTYPE html>
  <html>
    <head>
      <title>JS修改div元素屬性示例</title>
    </head>
    <body>
      <div id="myDiv" style="background-color: yellow">初始文本內容</div>
      <button onclick="changeBackground()">修改背景顏色</button>
      <script>
        function changeBackground() {
          var div = document.getElementById("myDiv");
          div.style.backgroundColor = "blue";
        }
      </script>
    </body>
  </html>

在這個示例中，初始化時div元素的背景顏色是黃色的，用戶點擊按鈕後，通過JS代碼獲取div元素並修改其style屬性中backgroundColor屬性的值為「blue」，從而實現動態修改div元素背景顏色的效果。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/190023.html