如何通过按钮更改 Django 模板使用的 CSS？答案

【问题标题】：How to change CSS that Django template uses with a button?如何通过按钮更改 Django 模板使用的 CSS？
【发布时间】：2021-06-23 17:33:53
【问题描述】：

我正在尝试在我的页面上实现可访问性选项，该选项会在单击可访问性按钮时将 CSS 更改为不同的文件。

目前，我的所有模板都扩展了 base_generic.html，其中 style.css 已加载。单击可访问性按钮时，我希望它更改为对该用户使用 style_access.css。我怎样才能做到这一点？

【问题讨论】：

您想为授权/非授权用户应用不同的样式吗？请描述导致您产生此解决方案概念的原始任务/意图。

标签： html css django django-templates

【解决方案1】：

我认为一种方法可以是，在 HTML 模板中引用这两个 CSS 文件，并使用带有 javascript 和 jquery 的 onclick 函数来更改模板特定元素的 id 或类。

例如，

假设我想通过 onclick 更改元素的 CSS，我可以创建一个计数器并在我将在我的 CSS 文件中引用的两个 id 之间切换。

<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>

您会看到每次单击按钮时元素的 CSS 都会发生变化

这不会在 CSS 文件之间完全改变，但它最终会改变您要选择的元素的 CSS。

【讨论】：

【解决方案2】：

您可以使用 JavaScript 更轻松地实现：

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');
}

【讨论】：