CODEWITHSUNDEEP
htmlcssdjangodjango-templates
afdkj
afdkj

Reputation: 25

How to change CSS that Django template uses with a button?

I am trying to implement accessibility option on my page that would change CSS to different file when accessibility button would be clicked.

For now, all my templates extends base_generic.html, where style.css is loaded. When accessibility button would be clicked, I wish for it to change to use style_access.css for that user. How can I accomplish that?

Upvotes: 0

Views: 940

Answers (2)

JKI Beats
JKI Beats

Reputation: 11

You can implement by using JavaScript more easily:

const toggleButton = document.getElementById('button');
const workContainer = document.getElementById('work');
 
toggleButton.addEventListener('click', () => {
    document.body.classList.toggle('blue'); 
    toggleButton.classList.toggle('active');
    workContainer.classList.toggle('blue');
 
    if(document.body.classList.contains('blue')){ 
        localStorage.setItem('blue', 'enabled');
    }else{
        localStorage.setItem('blue', 'disabled'); 
    }
});
 
if(localStorage.getItem('blue') == 'enabled'){
    document.body.classList.toggle('blue');
    toggleButton.classList.toggle('active');
    workContainer.classList.toggle('blue');
}

Upvotes: 1

mike_thecode
mike_thecode

Reputation: 181

I think a way could be, to refer in the HTML template to both CSS files, and use an onclick function with javascript, and jquery to change the id or class of the specific elements of the template.

So for example,

let's say I wanted onclick to change the CSS of an element, I could make a counter and toggle between two ids that I will have referenced in my CSS file or files.

<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
</script>
<button>This is a div</button>
<h1 class="potatoe" id="hello">HELLO THIS IS TEXT</h1>


<style>
  #hello { color: red; }
  #bye { color: blue; }
</style> 

<script>


var clickCount = 0;

$("button").on("click", function() {
    clickCount++;
    $(".potatoe").attr("id", clickCount % 2 === 0 ? "bye" : "hello");
});


</script>


</body>

As you'll see everytime you click the button the CSS of the element will change

This is not exactly changing between CSS files but it ultimately changes the CSS of the elements you want to select.

Upvotes: 1

Related Questions