Get cookie value by name and change style DOM element. I want to get the Arabic language from cookie and change the style of div to "dir=rtl" but I don't know I can do this in one function

   <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>
<style>
Object.defineProperty(window, "Cookies", {
    get: function() {
        return document.cookie.split(';').reduce(function(cookies, cookie) {
            cookies[cookie.split("=")[0]] = unescape(cookie.split("=")[1]);
            return cookies
        }, {});                                                                         ```                                                                                           there I want to get language and if this is Arabic do change of  to style dir="rtl"                                                                              ```
    }
});
</style>

Please how I can do this

CodePudding user response：

Image we have a cookie with language name and a div with myDiv id to change it's style to rtl if the language has set to arabic in the cookie:

<script>
function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2){
      return parts.pop().split(';').shift();
   }
}
const isArabic = getCookie('language') === 'Arabic';
const myDiv = document.getElementById('myDiv')
if(isArabic){
  myDiv.dir = isArabic ? 'rtl' : 'ltr';
}
</script>