文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用lang=将Html属性从lang="en“更改为lang="ar”

问如何使用lang=将Html属性从lang="en“更改为lang="ar”
EN

Stack Overflow用户

提问于 2022-02-15 12:58:46

回答 2查看 807关注 0票数 1

欢迎你，我在这里找了很多解决问题的方法，但不幸的是，我没有找到明确的答案。我在这个问题上尝试了这些答案，如何动态设置HTML属性？，但是它对我没有用。

我在英语作为默认语言和阿拉伯语作为第二语言之间创建了语言开关按钮，它可以很好地从左到右更改我的html页面的方向，因为第二种语言是阿拉伯语，但是当页面向右转时，标签中的属性(lang="en")不会更改为(lang="ar")，假设页面内容将是阿拉伯语。请帮助我实现这个功能。请查看属性lang在更改为RTL时，当我按转换按钮时，属性lang的值从en更改为ar。谢谢大家，

(function ($) {
  "use strict";
  
$(".direction_switch button").click(function () {
    $("body").toggleClass(function () {
      return $(this).is(".rtl, .ltr") ? "rtl ltr" : "rtl";
    });
  });
  
  })(window.jQuery);

.ltr {
  direction: ltr;
}

.rtl {
  direction: rtl;
}
ul {
  list-style: none;
}
.menu {
  display: block;
}
.menu ul {
  display: inline-flex;
}
.menu ul li {
  padding: 0 10px;
}
body.ltr .demo-ltr {
  display: none;
}
body.ltr .demo-rtl {
  display: block;
}
body.ltr .demo-rtl button {
  background-color: transparent;
  color: #000;
  border: 1px solid;
  padding: 0px 10px;
}
body.rtl .demo-rtl {
  display: none;
}
body.rtl .demo-ltr {
  display: block;
}
body.rtl .demo-ltr button {
  background-color: transparent;
  color: #000;
  border: 1px solid;
  padding: 0px 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

  <head>

  </head>

  <body class="ltr">
    <nav class="menu">
      <a href="">Logo</a>
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Abou</a>t</li>
        <!-- page-direction -->
        <div class="page_direction">
          <div class="demo-rtl direction_switch"><button class="rtl">RTL</button>
          </div>
          <div class="demo-ltr direction_switch"><button class="ltr">LTR</button>
          </div>
        </div>
        <!-- page-direction end -->
      </ul>
    </nav>
  </body>

</html>

javascript

html

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-02-15 13:07:08

您可以在attr(attribute,function)中使用jQuery方法，并更改HTML标记的属性，如下所示：

在代码中，i是集合的索引位置，v是属性的当前值(更改前)

(function ($) {
  "use strict";
  
$(".direction_switch button").click(function () {
    $("body").toggleClass(function () {
      return $(this).is(".rtl, .ltr") ? "rtl ltr" : "rtl";
    });

    //Changing attribute of HTML tag
    $("html").attr("lang",(i,v)=>{
        return v=="en"?"ar":"en"
    })});
  
  })(window.jQuery);

.ltr {
  direction: ltr;
}

.rtl {
  direction: rtl;
}
ul {
  list-style: none;
}
.menu {
  display: block;
}
.menu ul {
  display: inline-flex;
}
.menu ul li {
  padding: 0 10px;
}
body.ltr .demo-ltr {
  display: none;
}
body.ltr .demo-rtl {
  display: block;
}
body.ltr .demo-rtl button {
  background-color: transparent;
  color: #000;
  border: 1px solid;
  padding: 0px 10px;
}
body.rtl .demo-rtl {
  display: none;
}
body.rtl .demo-ltr {
  display: block;
}
body.rtl .demo-ltr button {
  background-color: transparent;
  color: #000;
  border: 1px solid;
  padding: 0px 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

  <head>

  </head>

  <body class="ltr">
    <nav class="menu">
      <a href="">Logo</a>
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Abou</a>t</li>
        <!-- page-direction -->
        <div class="page_direction">
          <div class="demo-rtl direction_switch"><button class="rtl">RTL</button>
          </div>
          <div class="demo-ltr direction_switch"><button class="ltr">LTR</button>
          </div>
        </div>
        <!-- page-direction end -->
      </ul>
    </nav>
  </body>

</html>

票数 1

Stack Overflow用户

发布于 2022-02-15 13:15:29

document.documentElement.setAttribute('lang', 'AR');

也是

document.documentElement.lang = 'AR'

注意这一点；

<script>Code Here</script>

HTMLElement.lang描述

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71126861

复制

相似问题

问如何使用lang=将Html属性从lang="en“更改为lang="ar”
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用lang=将Html属性从lang="en“更改为lang="ar”EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用lang=将Html属性从lang="en“更改为lang="ar”
EN