元素的dir属性

最新推荐文章于 2023-10-05 23:30:07 发布

夜跑者

最新推荐文章于 2023-10-05 23:30:07 发布

阅读量618

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/liubangbo/article/details/105024719

版权

HTML5 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

dir属性可以设置元素的显示方向，是从左往右(ltr)，还是从右往左(rtl)。如果你的产品要在阿拉伯语，波斯语，希伯来语等土豪国家卖，那么这个属性是很有用的。我们还是通过一个简单例子看看：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>data-theme</title>
    <style>
        .img {
            width: 100px;
            height: 100px;
            border: red solid 2px;
            background-color: green;
            background-size: 100% 100%;
            margin-bottom: 10px;
        }

        .img2{
            width: 100px;
            height: 100px;
            border: blue solid 2px;
            background-color: gray;
            background-size: 100% 100%;
            display: inline-block;
        }
        .txt{
            display: inline-block;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="img"></div>
    <div id="reverse">
        <div class="img2"></div>
        <div class="txt">hello world</div>
    </div>
</div>
<script>

    setTimeout(function () {
        document.getElementById("reverse").dir = "rtl"
    }, 2000);

</script>
</body>

</html>

运行例子后，2秒后就会看到效果。

夜跑者

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
元素的dir属性

dir属性可以设置元素的显示方向，是从左往右(ltr)，还是从右往左(rtl)。如果你的产品要在阿拉伯语，波斯语，希伯来语等土豪国家卖，那么这个属性是很有用的。我们还是通过一个简单例子看看：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me...
复制链接

扫一扫