如何使用 JavaScript 设置是否应覆盖文本以支持同一文档中的多种语言?
在本教程中，我们将学习如何使用 JavaScript 设置是否应覆盖文本以支持同一文档中的多种语言。
使用 JavaScript 中的 unicodeBidi 属性设置是否应覆盖文本以支持同一文档中的多种语言。将其设置为 normal、embed 或 bidi-override。bidi-override 允许您添加方向，即从 rtl 到 ltr。
使用 unicodeBidi 属性
在 JavaScript 中，unicodeBidi 属性与 direction 属性一起使用，用于设置是否应覆盖文本以支持同一文档中的多种语言。此属性是元素对象中 style 属性的一部分。我们需要 document.getElementById() 方法来检索元素对象。
语法
document.getElementById('element_id').style.unicodeBidi = normal | embed | bidi-override | inherit | initial
在上述语法中，我们将 unicodeBidi 属性与 document.getElementById() 方法一起使用。
参数
normal − 它不指定其他嵌入级别。这是默认值。
embed − 它指定了额外的嵌入级别。
bidi-override − 它基于 direction 属性指定了额外的嵌入级别。
inherit − 该属性由其父元素继承。
initial − 该属性设置为 default。
示例
在下面的示例中，我们设置是否应使用 JavaScript 覆盖文本以支持同一文档中的多种语言。函数"setUnicodeBidi()"与按钮"设置 unicodeBidi"的单击事件相关联。每当用户单击按钮时，该函数都会执行并设置多个元素的 unicodeBidi 属性。
<html> <head> <style> .item { padding: 15px; margin-top: 5px; background-color: cornsilk; border: 1px solid black; direction: rtl; } </style> </head> <body> <h3> Set whether the text should be overridden to support multiple languages in the same document with JavaScript using the <i> unicodeBidi </i> property</h3> <button onclick="setUnicodeBidi()"> Set unicodeBidi </button> <div id="element1" class="item"> I Love Tutorialspoint </div> <div id="element2" class="item"> Welcome to Tutorialspoint </div> <script> // All elements const element1 = document.getElementById("element1") const element2 = document.getElementById("element2") // "Set unicodeBidi" button click event handler function function setUnicodeBidi() { element1.style.unicodeBidi = 'bidi-override' element1.style.innerHTML = 'Welcome to Tutorialspoint (unicodeBidi: bidi-override)' element2.style.unicodeBidi = 'embed' element2.style.innerHTML = 'I Love Tutorialspoint (unicodeBidi: embed)' } </script> </body> </html>
使用 setProperty() 方法
在 JavaScript 中，setProperty 方法采用参数中的属性名称和值，并使用提供的值设置该属性。例如，要设置是否应覆盖文本以支持同一文档中的多种语言，setProperty 方法采用"unicode-bidi"作为第一个参数。第二个参数采用值。此方法在元素的元素对象的 style 属性中可用。
语法
document.getElementById('element_id').style.setProperty(name, value, priority)
在上述语法中，我们对 document.getElementById() 方法返回的元素对象使用 setProperty 方法。
参数
name − 属性的名称。
value − 属性值。
priority − 属性值的优先级(可选)。
示例
在下面的示例中，我们设置了是否应覆盖文本以支持同一语言中的多种语言使用 JavaScript 的 setProperty 方法创建文档。有两个下拉输入字段用于接收 direction 属性和 unicodeBidi 属性的用户输入。使用"设置 unicodeBidi"按钮，在点击事件上执行"setUnicodeBidi()"函数。
<html> <body> <h3> Set whether the text should be overridden to support multiple languages in the same document with JavaScript using the <i> setProperty() </i>method </h3> <div> <label for="unicodeBidi"> Select the unicodeBidi property: </label> <select name="unicodeBidi" id="unicodeBidi"> <option value = "normal"> normal </option> <option value = "embed"> embed </option> <option value = "bidi-override"> bidi-override </option> </select> </div> <div style="margin: 5px 0px;"> <label for="direction"> Select the direction property: </label> <select name="direction" id="direction"> <option value = "ltr"> ltr </option> <option value = "rtl"> rtl </option> </select> </div> <button onclick="setUnicodeBidi()"> Set unicodeBidi </button> <div id="root" style="padding: 15px; margin-top: 5px; background-color: cornsilk; border: 1px solid black;"> Welcome to Tutorialspoint </div> <script> // "Set unicodeBidi" button click event handler function function setUnicodeBidi() { const root = document.getElementById('root') //direction input field value const direction = document.getElementById('direction').value root.style.direction = direction //unicodeBidi input field value const unicodeBidi = document.getElementById('unicodeBidi').value // 使用 setProperty 方法 root.style.setProperty('unicode-bidi', unicodeBidi) } </script> </body> </html>
在本教程中，我们学习了如何使用 JavaScript 设置是否应覆盖文本以支持同一文档中的多种语言。我们已经看到了两个使用按钮单击事件和用户输入设置 unicodeBidi 属性的示例。此外，我们还学习了 unicodeBidi 属性和 setProperty 方法。用户可以根据自己的需求遵循其中任何一种方法。
