如何使用 JavaScript 设置文本装饰中的线条样式?

javascriptobject oriented programmingfront end technology

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

使用 Style textDecorationStyle 属性

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

主流浏览器都支持此属性。 Firefox 添加了对名为 MozTextDecorationStyle 的替代属性的支持。

语法

以下是使用 JavaScript Style 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 元素的内容。

我们从用户那里获取文本修饰线样式。样式继承将显示设置为我们内容的父元素的文本修饰线样式。在此程序中，此样式设置为虚线。

当用户勾选按钮时，我们调用函数来按照上面给出的语法设置文本修饰线样式。


<!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>