如何使用 JavaScript 设置文本装饰线样式？

在本教程中，我们将学习如何使用 JavaScript 设置文本装饰线的样式。要设置 JavaScript 中的线样式，请使用 `textDecorationStyle` 属性。您可以为线样式设置下划线、双线或上划线等。让我们简要讨论一下我们的主题。

使用 `textDecorationStyle` 属性

我们可以使用此属性设置或返回文本装饰中的线样式。

主要浏览器都支持此属性。Firefox 通过名为 `MozTextDecorationStyle` 的备用属性添加支持。

语法

以下是使用 JavaScript `textDecorationStyle` 属性设置文本装饰线样式的语法：

object.style.textDecorationStyle = solid | double | dotted | dashed | wavy | initial |inherit;

使用此语法，可以将所需的文本装饰线样式设置为元素的样式。

参数

  • **solid** - 单行显示。
  • **double** - 双线。
  • **dotted** - 点线。
  • **dashed** - 虚线。
  • **wavy** - 波浪线
  • **initial** - 将此属性设置为其默认值。
  • **inherit** - 从其父元素继承此属性。

此属性的默认值为 `solid`。返回值是表示文本装饰线样式的字符串。

示例 1

您可以尝试运行以下代码以使用 JavaScript 返回文本装饰中的线样式：

<!DOCTYPE html>
<html>
<body>
   <div id="myText" style="text-decoration: underline;">
      This is demo text.
   </div>
   <br>
   <button onclick="display()"> Set Text Decoration </button>
   <script>
      function display() {
         document.getElementById("myText")
         .style.textDecorationColor="red";
         document.getElementById("myText")
         .style.textDecorationStyle="double";
      }
   </script>
</body>
</html>

示例 2

在这个程序中，我们正在将文本装饰线样式设置为 div 元素的内容。

我们从用户那里获取文本装饰线样式。`inherit` 样式将显示设置为我们内容的父元素的文本装饰线样式。在这个程序中，此样式设置为 `dashed`。

当用户点击按钮时，我们调用函数根据上面给出的语法设置文本装饰线样式。

<!DOCTYPE html>
<html>
<head>
<style>
   #txtDecStylEl{
      text-decoration: underline;
   }
   #txtDecStylParent{
      text-decoration-style: dashed;
   }
</style>
</head>
<body>
   <h3> Setting the style of text-decoration line using the
      <i> textDecorationStyle </i> property
   </h3>
   <div id="txtDecStylParent">
   <div id="txtDecStylEl"> Set the text-decoration line style here.
   </div>
   </div>
   <br>
   <div id="txtDecStylBtnWrap">
      <select id="txtDecStylSel" size="10">
         <option/> dotted
         <option/> dashed
         <option/> double
         <option selected="selected"/> solid
         <option/> wavy
         <option/> initial
         <option/> inherit
      </select>
      <br>
      <p> Select the text-decoration line style and click on the button.</p>
      <button onclick="setTextDecLineStyle();"> Apply </button>
   </div>
   <br>
</body>
<script>
   function setTextDecLineStyle(){
      var txtDecStylSelTag=document.getElementById("txtDecStylSel");
      var txtDecStylSelIndx=txtDecStylSelTag.selectedIndex;
      var txtDecStylSelStat=txtDecStylSelTag.options[txtDecStylSelIndx].text;
      var txtDecStylBtnWrap=document.getElementById("txtDecStylBtnWrap");
      var txtDecStylUsrEl=document.getElementById("txtDecStylEl");
      txtDecStylUsrEl.style.textDecorationStyle=txtDecStylSelStat;//Firefox browser
      txtDecStylUsrEl.style.MozTextDecorationStyle=txtDecStylSelStat;
      txtDecStylUsrEl.innerHTML="You have set the text-decoration line style to <b>" + txtDecStylUsrEl.style.textDecorationStyle + "</b>";
   }
</script>
</html>

示例 3

此程序已将文本装饰线样式设置为 div 元素内部的内容。当用户点击按钮时，我们按照获取文本装饰线样式的语法向用户显示文本装饰线样式。

<html>
<head>
<style>
   #txtDecStylGetEl{
      text-decoration: underline;
   }
</style>
</head>
<body>
   <h3>Getting the style of the text-decoration line using the
      <i> textDecorationStyle </i>property.
   </h3>
   <div id="txtDecStylGetEl" style="text-decoration-style: dashed">
      Get the text-decoration line style of this content.
   </div>
   <br>
   <div id="txtDecStylGetBtnWrap">
      <p> Click on the button to get the style.</p>
      <button onclick="getTextDecStyle();">Get</button>
   </div>
   <br>
   <p id="txtDecStylGetOp"> </p>
</body>
<script>
   function getTextDecStyle(){
      var txtDecStylGetBtnWrap=document.getElementById("txtDecStylGetBtnWrap");
      var txtDecStylGetEl=document.getElementById("txtDecStylGetEl");
      var txtDecStylGetOp=document.getElementById("txtDecStylGetOp");
      txtDecStylGetOp.innerHTML="The text-decoration line style is="+ txtDecStylGetEl.style.textDecorationStyle;
   }
</script>
</html>

在本教程中，我们学习了 JavaScript 中的 `textDecorationStyle` 属性。要设置文本装饰线的样式，此属性是 JavaScript 中的内置属性，非常易于编码。

更新于：2022年11月22日

1K+ 次浏览

启动您的 职业生涯

完成课程后获得认证

开始学习
广告
© . All rights reserved.