如何使用 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 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告

© . All rights reserved.