如何更改Django模板与按钮一起使用的CSS？
如何更改Django模板与按钮一起使用的CSS？
提问于 2021-03-27 05:32:08
我正在尝试实现我的页面上的辅助功能选项，将CSS更改为不同的文件时，可访问性按钮将被点击。
现在，我的所有模板都扩展了加载style.css的base_generic.html。当可访问性按钮被单击时，我希望它更改为对该用户使用style_access.css。我如何才能做到这一点？
回答 2
Stack Overflow用户
发布于 2021-03-27 08:03:50
我认为一种方法是，在HTML模板中引用这两个CSS文件，并使用onclick函数和javascript以及jquery来更改模板中特定元素的id或类。
举个例子，
假设我想要onclick更改一个元素的CSS，我可以创建一个计数器，并在我的CSS文件或文件中引用的两个ids之间切换。
<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。
Stack Overflow用户
发布于 2021-09-26 14:19:25
使用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');
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66824554
复制相关文章
相似问题
腾讯云开发者
