如何使用 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 方法。属性名称参数应为"text-decoration-color"，值和优先级将根据用户而定。
参数
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 方法来设置文本装饰的颜色。用户可以按照其中任何一种方法来设置文本装饰的颜色。
