如何通过按钮更改 Django 模板使用的 CSS？
Posted
技术标签:
【中文标题】如何通过按钮更改 Django 模板使用的 CSS？【英文标题】：How to change CSS that Django template uses with a button? 【发布时间】：2021-06-23 17:33:53 【问题描述】：我正在尝试在我的页面上实现可访问性选项，该选项会在单击可访问性按钮时将 CSS 更改为不同的文件。
目前，我的所有模板都扩展了 base_generic.html，其中 style.css 已加载。单击可访问性按钮时，我希望它更改为对该用户使用 style_access.css。我怎样才能做到这一点？
【问题讨论】：
您想为授权/非授权用户应用不同的样式吗？请描述导致您产生此解决方案概念的原始任务/意图。 【参考方案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');
【讨论】：
以上是关于如何通过按钮更改 Django 模板使用的 CSS？的主要内容，如果未能解决你的问题，请参考以下文章
我无法在 django 中使用“静态”模板导入 css 文件