如何使用 JavaScript 設定文字裝飾的顏色？

在本教程中，我們將學習如何使用 JavaScript 設定文字裝飾的顏色。

文字裝飾是用於裝飾文字行的 CSS 屬性。我們可以使用下劃線、上劃線、刪除線或無來裝飾線條。要使用 JavaScript 設定文字裝飾的顏色，我們有多種方法，在本教程中，我們將討論其中的兩種：

  • 使用 style.textDecorationColor 屬性

  • 使用 style.setProperty 方法

使用 style.textDecorationColor 屬性

在 JavaScript 中，元素的 style.textDecorationColor 屬性用於設定元素文字裝飾的顏色。可以使用顏色名稱、十六進位制顏色程式碼或 rgb 顏色程式碼為文字裝飾設定任何顏色。要使用 style.textDecorationColor 屬性設定文字裝飾的顏色，首先，我們需要使用 document.getElementById() 方法訪問元素物件，然後使用 style.textDecorationColor 屬性設定文字裝飾的顏色。

語法

const object = document.getElementById('element_id')

object.style.textDecorationColor = 'color | inherit | initial'

這裡“element_id”是 HTML 元素的 id。使用 document.getElementById() 方法，我們正在訪問元素物件並設定 style.textDecorationColor 屬性。

引數

  • color - 文字裝飾的顏色。

  • inherit - 文字裝飾的顏色由其父元素的屬性繼承。

  • initial - 文字裝飾的顏色設定為預設值。

示例

在下面的示例中，我們使用了 style.textDecorationColor 屬性來使用 JavaScript 設定文字裝飾的顏色。我們使用了按鈕“設定文字裝飾顏色”的點選事件來執行“setTextDecorationColor()”函式，該函式設定多行的文字裝飾的顏色。

<html>
<head>
   <style>
      .decoration {
         text-decoration: underline;
         padding: 10px;
         margin: 5px 0px;
         background-color: rgb(220 252 243);
      }
   </style>
</head>
<body>
   <h2> Using the style.textDecorationColor Property </h2>
   <button onclick="setTextDecorationColor()"> Set Text-Decoration Color </button>
   <div>
      <div id="text1" class="decoration"> Welcome to Tutorialspoint! </div>
      <div id="text2" class="decoration"> Hello World! </div>
      <div id="text3" class="decoration"> JavaScript is Awesome! </div>
   </div>
   <script>
      // all decorated text
      const text1 = document.getElementById('text1')
      const text2 = document.getElementById('text2')
      const text3 = document.getElementById('text3')
      // 'Set Text-Decoration Color' button click event handler function
      function setTextDecorationColor() {
         // set the color of the text-decoration using the style.textDecorationColor property
         text1.style.textDecorationColor = 'red'
         text2.style.textDecorationColor = 'green'
         text3.style.textDecorationColor = 'blue'
      }
   </script>
</body>
</html>

使用 style.setProperty 方法

在 JavaScript 中，style.setProperty 方法設定元素的新屬性或現有屬性。要使用 style.setProperty 方法設定文字裝飾的顏色，首先，使用 document.getElementById() 方法訪問元素，然後使用 style.setProperty 方法設定文字裝飾顏色。

語法

const object = document.getElementById('element_id')

object.style.setProperty(property_name, value, priority)

這裡，“element_id”是 HTML 元素的 id。使用 document.getElementById() 方法，我們正在訪問元素物件並使用 style.setProperty 方法。property_name 引數應為“text-decoration-color”，value 和 priority 將根據使用者而定。

引數

  • property_name - 要設定的屬性的名稱。

  • value - 屬性的新值。

  • priority - 屬性值的優先順序（可選）。

示例

在下面的示例中，我們使用了 style.setProperty 方法來使用 JavaScript 設定文字裝飾的顏色。我們使用了一個選擇框來獲取使用者對文字裝飾顏色的輸入，並使用按鈕點選事件將該顏色設定為元素的文字裝飾。按鈕“設定文字裝飾顏色”的點選事件執行“setRuleColor()”函式，該函式將文字裝飾的顏色設定為使用者選擇的顏色。

<html>
<head>
   <style>
      .decoration {
         text-decoration: underline;
         padding: 10px;
         margin: 5px 0px;
         background-color: rgb(220 252 243);
      }
   </style>
</head>
<body>
   <h2> Using <i> style.setProperty </i> method with JavaScript </h2>
   <p> Select the text-decoration color: </p>
   <select name="color" id="color">
      <option value = "red"> Red </option>
      <option value = "green"> Green </option>
      <option value = "yellow"> Yellow </option>
      <option value = "blue"> Blue </option>
   </select>
   <button onclick="setTextDecorationColor()"> Set Text-Decoration Color </button>
   <div id="root" class="decoration"> Welcome to Tutorialspoint! </div>
   <script>
      // 'Set Text-Decoration Color' button click event handler function
      function setTextDecorationColor() {
         const root = document.getElementById('root')
         // select box color value
         const color = document.getElementById('color').value
         // set the color of the text-decoration using the style.setProperty method
         root.style.setProperty('text-decoration-color', color)
      }
   </script>
</body>
</html>

在本教程中，我們學習瞭如何使用 JavaScript 設定文字裝飾的顏色。我們使用了 style.textDecorationColor 屬性和 style.setProperty 方法來設定文字裝飾的顏色。使用者可以遵循任何一種方法來設定文字裝飾的顏色。

更新於：2022-11-09

1K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.