如何解决带有扩展圆圈动画的暗模式
我的页面右上角有夜间模式（或黑暗模式）切换按钮。
This is a link for perfect example that shows what I want to do
HTML 我使用 data-theme 属性来更改模式。 （夜 > 光或光 > 夜）
<body data-theme="">
<div class="toggle" id="switch" onclick="toggleDarkMode()"></div>
</body>
JS
function toggleDarkMode() {
var dataTheme = $('body').attr('data-theme');
if(dataTheme == 'dark') {
$('body').attr('data-theme','light');
} else {
$('body').attr('data-theme','dark');
}
};
我需要您的建议，如何使用关键帧扩展圆形动画切换夜间模式。
提前致谢！
解决方法
对此的一个非常简单但有效的解决方案是创建一个 class dark，您可以在其中放置所有暗模式样式。然后单击 class
eventListener()
document.querySelector('.toggle').addEventListener('click',function(e) {
var body = document.getElementsByTagName('body')[0];
body.className = body.className !== 'dark' && 'dark';
}).dark {
background: black;
color: white;
}<body>
<p>Hello world</p>
<button class='toggle'>Dark Mode</button>
</body>您可以使用 CSS attribute selector 根据 data-theme 属性定位正文并对其进行适当的样式设置。
function toggleDarkMode() {
var dataTheme = $('body').attr('data-theme');
if (dataTheme == 'dark') {
$('body').attr('data-theme','light');
} else {
$('body').attr('data-theme','dark');
}
};body[data-theme="light"] {
background-color: white;
color: black;
}
body[data-theme="dark"] {
background-color: black;
color: white;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body data-theme="light">
<p>Hello world</p>
<button class="toggle" id="switch" onclick="toggleDarkMode()">Toggle Theme</button>
</body>这将允许您使用您喜欢的任何 CSS 样式，例如您问题中提供的链接。
,试试这个方法
<script>
$(document).ready(function(){
$("#switch").click(function(){
var dataTheme = $('body').attr('data-theme');
if(dataTheme == 'dark') {
$('body').attr('data-theme','light');
} else {
$('body').attr('data-theme','dark');
}
};
});
</script>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。