gpt4 book ai didi

javascript - 通过在 Vuejs 中选择语言来改变方向

转载 作者:行者123 更新时间:2023-12-03 06:41:12 25 4
gpt4 key购买 nike

我有一个语言选择选项。如果我选择阿拉伯语,那么它会改变方向。

* {
direction: rtl!important;
}

当我使用它时,整个方向变成了从右到左。但是我如何使用方法来做到这一点?

methods: {
languageSelection() {
if(this.lang == 'arb') {
document.getElementsByTagName("*")[0].style.direction = "rtl!important";
document.getElementsByTagName("html")[0].style.direction = "rtl!important";
document.getElementsByTagName("body")[0].style.direction = "rtl!important";
}
}
}

以上代码无效!如果我可以添加一个 CSS 文件,那对我来说会更好。例如:

languageSelection() {
if(this.lang == 'arb') {
// active a css file like: style-rtl.css
}
}

但这怎么可能呢?

最佳答案

好的。所以当你使用 getElementsByTagName("*")[0]你可能会得到 <html> 的句柄元素。因此,您在下一行访问的是相同的元素。

更改所有元素direction你将不得不遍历集合:

const elems = document.getElementsByTagName("*")
for (let elem of elems) {
elem.style.direction = 'rtl'
}

但这仍将包括<script> , <style> , <meta>标签,这不是最好的解决方案。

我的解决方案

我会在 css 中创建类

html.is-rtl * {
direction: rtl;
}

当您选择从右到左阅读的语言时,只需切换类别即可。

languageSelection() {
if (this.lang == 'arb') {
document.querySelector('html').classList.add('is-rtl')
}
}

关于javascript - 通过在 Vuejs 中选择语言来改变方向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64410664/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com