如何使用 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.