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 class="login-form" to style dir="rtl" ```
}
});
</style>
Please how I can do this
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>