如何按名称获取Cookie值并修改DOM样式 单函数实现读取语言Cookie设置div dir=rtl

1. 修正代码放置错误 #

你现有的JS逻辑错误写在了<style>标签内，需要移到专门的<script>标签中才能正常执行。

2. 完整实现代码 #

需要确保DOM加载完成后再执行属性修改操作，避免获取不到未渲染的DOM元素，完整可运行代码如下：

<h2 class="text">{% translate 'Admin' %}</h2>
<form class="login-form" method="post">
    {% csrf_token %}
    <div class="login-form">
        {% include 'form_login.html' with field=form.username %}
    </div>             
</form>
</div>

<script>
// 定义全局Cookies工具，用于快速读取所有Cookie
Object.defineProperty(window, "Cookies", {
    get: function() {
        return document.cookie.split(';').reduce(function(cookies, cookie) {
            const [key, value] = cookie.trim().split("=");
            cookies[key] = unescape(value);
            return cookies
        }, {});
    }
});

// 等待DOM完全加载后执行逻辑
document.addEventListener('DOMContentLoaded', function() {
    // 读取语言Cookie，此处根据你的实际Cookie键名修改，Django默认通常为django_language
    const currentLang = window.Cookies['django_language'] || window.Cookies['lang'];
    // 阿拉伯语的常见标识为ar，可根据你实际的存储值调整判断条件
    if (currentLang && currentLang.startsWith('ar')) {
        // 获取所有class为login-form的元素
        const loginForms = document.querySelectorAll('.login-form');
        // 遍历设置dir属性为rtl
        loginForms.forEach(form => {
            form.setAttribute('dir', 'rtl');
        });
    }
})
</script>

3. 自定义调整说明 #

• 如果你的语言Cookie的键名不是django_language或者lang，可以打开浏览器调试工具的「应用/Application」标签，在Cookie列表里找到对应存储语言的键名，替换代码里的对应字段即可
• 如果你的阿拉伯语存储值不是ar开头的格式，直接修改if判断的条件和你实际存储的值匹配即可

内容的提问来源于stack exchange，提问作者Flower