如何使用 JavaScript 設定巢狀引號的型別？

在本教程中，我們將學習如何使用 JavaScript 設定巢狀引號的型別。

引號型別可以使用 JavaScript 進行更改。例如，如果一個句子用雙引號 (“”) 括起來，則可以將其修改為單引號 (‘’) 。要設定引號，請使用 元素。然後，使用 quotes 屬性新增引號型別。

使用 quotes 屬性設定引號型別

在 JavaScript 中，quotes 屬性用於設定巢狀引號的型別。可以使用引號字元或 HTML 實體編號來設定引號。第一級引號和第二級引號也可以使用此屬性設定。它是元素物件 style 屬性的一部分，因此我們還需要 document.getElementById() 方法來訪問元素物件。

語法

document.getElementById('id').style.quotes = string string string string | none | inherit | initial

在上述語法中，我們使用 quotes 屬性來設定巢狀引號的型別。document.getElementById() 方法訪問具有 id 為 'id' 的元素的元素物件。

引數

  • string string string string − 指定引號。前兩個字串用於第一級引號，後兩個字串用於第二級引號。

  • none − 指定不使用引號。

  • inherit − 引號由其父元素繼承。

  • initial − 引號設定為預設值。

示例

在下面的示例中，我們透過單擊按鈕為多個引號設定引號型別。“設定引號型別”按鈕與一個單擊事件相關聯，每當使用者單擊該按鈕時，都會觸發函式“setQuotation()”。

<html>
<head>
   <style>
      .item {
         padding: 15px;
         margin-top: 5px;
         background-color: aliceblue;
         border: 1px solid black;
      }
   </style>
</head>
<body>
   <h2> Set the type of quotation marks for embedded quotations using the <i> quotes property </i> with JavaScript </h2>
   <button onclick="setQuotation()"> Set Quotation Type </button>
   <div class="item">
      <q id="q1"> Hello World! </q>
   </div>
   <div class="item">
      <q id="q2"> Welcome <q> User </q> to Tutorialspoint </q>
   </div>
   <script>
      
      // "Set Quotation Type" button click event handler function
      function setQuotation() {
         const q1 = document.getElementById("q1")
         const q2 = document.getElementById("q2")
         q1.style.quotes = "'\253' '\273'"
         q2.style.quotes = "'`' '`' '<' '>'"
      }
   </script>
</body>
</html>

使用 setProperty 方法設定引號型別

JavaScript 中的 setProperty 方法用於設定元素的任何新屬性或現有屬性。此方法在元素元素物件的 style 屬性中可用。它在引數中獲取屬性名稱和值，並使用提供的值為該屬性設定值。例如，要設定巢狀引號的型別，setProperty 方法將“quotes”作為第一個引數，在第二個引數中，它獲取值。

語法

document.getElementById('id').style.setProperty(name, value, priority)

在上述語法中，document.getElementById() 方法返回元素的元素物件，以便我們可以在其上執行 setProperty 方法。

引數

  • name − 屬性的名稱。

  • value − 屬性值。

  • priority − 屬性值的優先順序（可選）。

示例

在下面的示例中，我們使用 setProperty 方法使用 JavaScript 設定了巢狀引號的型別。使用者可以在輸入欄位中輸入內容。“設定引號型別”按鈕用於在單擊事件上執行“setQuotationType()”函式，並根據使用者輸入設定引號。

<html>
<body>
   <h2> Set the type of quotation marks for embedded quotations using the <i> setProperty method </i> with JavaScript </h2>
   <h4> Enter the type of quotation marks: </h4>
   <input type="text" id="quotation-type" name="quotation-type">
   <button onclick="setQuotation()"> Set Quotation Type </button>
   <div style="padding: 15px; margin-top: 5px; background-color: aliceblue; border: 1px solid black;">
      <q id="q"> Welcome <q> User </q> to Tutorialspoint</q>
   </div>
   <p> Note : Please enter the type of quotation mark with double quotes such as ("< " ">") </p>
   <script>
      
      // 'Set Quotation Type' button click event handler function
      function setQuotation() {
         const q = document.getElementById('q')
         
         // user input value for quotation marks
         const quotation_type = document.getElementById('quotation-type').value;
         q.style.setProperty('quotes', quotation_type);
      }
   </script>
</body>
</html>

在本教程中，我們學習瞭如何使用 JavaScript 設定巢狀引號的型別。我們還學習瞭如何獲取使用者輸入值並設定引號。此外，我們學習了 quotes 屬性和 setProperty 方法。使用者可以根據自己的需求遵循其中任何一種。

更新於: 2022年11月15日

419 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告