HTML DOM Bdo dir 属性

HTML DOM Bdo dir 属性与 HTML <bdo> 元素关联。此处，bdo 代表双向覆盖。<bdo> 标签用于覆盖当前文本方向，默认为从左到右。bdo dir 属性设置或返回 <bdo> 元素的 dir 属性值。dir 属性对于 <bdo> 元素是必需的，它指定文本流的方向。

语法

以下是语法 −

设置 dir 属性 −

bdoObject.dir = "ltr|rtl"

此处，ltr 表示文本方向从左到右，而 rtl 表示文本方向从右到左。

返回 dir 属性 −

bdoObject.dir

示例

让我们看一个 HTML DOM bdo dir 属性的示例 −

<!DOCTYPE html>
<html>
<body>
<h3><bdo id="myBdo" dir="rtl">RIGHT-TO-LEFT</bdo></h3>
<p>Click the below button to get text direction of the above text</p>
<button onclick="getDirection()">GET DIRECTION</button>
<button onclick="setDirection()">SET DIRECTION</button>
<p id="Sample"></p>
<script>
   function getDirection() {
      var x = document.getElementById("myBdo").dir;
      document.getElementById("Sample").innerHTML ="The text direction is from " + x;
   }
   function setDirection(){
      document.getElementById("myBdo").dir="ltr";
   }
</script>
</body>
</html>

输出

这将产生以下输出 −

点击"获取方向" −

点击"设置方向" −

在上面的例子中 −

我们首先在  <h3>元素内创建了一个  元素，并将 dir 属性值设置为 “rtl” −

<h3><bdo id="myBdo" dir="rtl>>从右到左</bdo></h3>

然后，我们创建了两个按钮"GET DIRECTION"和"SET DIRECTION"，分别用于执行 getDirection() 和 setDirection() 函数 −

<button onclick="getDirection()">GET DIRECTION</button>
<button onclick="setDirection()">SET DIRECTION</button>

getDirection() 函数获取与其关联的 id 为 “myBdo” 的元素，在本例中为 <bdo> 元素。然后，将从 元素获取的 dir 属性值赋给变量 x。该值随后显示在 id 为 “Sample” 的段落中。与其关联的 −

function getDirection() {
   var x = document.getElementById("myBdo").dir;
   document.getElementById("Sample").innerHTML ="The text direction is from " + x;
}

setDirection() 函数通过 id “mybdo” 获取元素，并将其 dir 属性值设置为 “ltr”，表示从左到右。这也是默认的文本方向 −

function setDirection(){
   document.getElementById("myBdo").dir="ltr";
}

相关文章

• HTML DOM 输入按钮对象
• HTML 画布 shadowBlur 属性
• HTML DOM address 对象
• HTML 画布 shadowColor 属性
• 使用 onmouseover 属性更改网页背景颜色
• HTML 画布 fillStyle 属性
• HTML frame 框架标签
• HTML Canvas clearRect() 方法
• HTML body 标签
• HTML optgroup 标签

有用资源

• html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/