HTML - DOM 元素 dir 属性

dir 属性提供了一种访问 HTML 中任何元素的 dir 属性值的方法，用于设置和检索。此属性决定文本的方向性，指定元素的内容应从左到右 (LTR) 还是从右到左 (RTL) 显示。

语法

设置 dir 属性

element.dir = "value";

获取 dir 属性

var direction = element.dir;

属性

属性值	描述
RTL	确定元素内容的从右到左方向。
LTR	确定元素内容的从左到右方向。
auto	自动确定文本方向。

返回值

此属性返回一个“字符串”，表示元素内文本的方向性。

HTML DOM 元素“dir”属性示例

以下是一些 dir 属性在各种用例中的示例，其中该属性可用于控制 HTML 元素内文本的方向性。

将文本方向设置为从右到左 (RTL)

dir 属性 设置为“rtl”，表示段落的文本方向为从右到左。此段落内的文本将从右到左显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Right-to-Left (RTL)
    </title>
</head>

<body>
    <h2 align = "center">HTML - DOM Element </h2>
    <h3 align = "center">dir Property
    <br><br> 
        Setting Text Direction to Right-to-Left (RTL)
    </h3> 
    <p dir="rtl">
        This text direction is right-to-left.
    </p>
</body>

</html>

动态更改文本方向

此示例演示如何使用 JavaScript 动态更改元素的文本方向，包括一个按钮，该按钮可在从左到右 (LTR) 和从右到左 (RTL) 之间切换段落的文本方向。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>
        Dynamically Changing Text Direction
    </title>
</head>

<body>
    <h2 align = "center">HTML - DOM Element </h2>
    <h3 align = "center">dir Property
    <br><br> 
        Dynamically Changing Text Direction 
    </h3>  

    <button onclick="changeDirection()">
    Toggle Direction
    </button>

    <p id="text" dir="ltr">
    This text direction can be toggled.
    </p>
    <script>
        function changeDirection() {
            var textElement = 
            document.getElementById("text");
            if (textElement.dir === "ltr") {
                textElement.dir = "rtl";
            } else {
                textElement.dir = "ltr";
            }
        }
    </script>
</body>

</html>

使用继承进行文本方向

在此示例中，<div> 元素使用 dir 属性将其文本方向设置为从右到左 (RTL)。<p> 元素在 div 内继承此文本方向性，以从右到左显示文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Using Inheritance for Text Direction
    </title>
</head>

<body>
    <h2 align = "center">HTML - DOM Element </h2>
    <h3 align = "center">dir Property
    <br><br> 
    Using Inheritance for Text Direction
    </h3>   
    <div dir="rtl">
        <p>
            This paragraph inherits the text 
            direction from its parent.
        </p>
    </div>    
</body>

</html>

支持的浏览器

属性
dir	是	是	是	是	是

html_dom_element_reference.htm

打印页面