如何使用 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+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告