Javascript 暗模式和扩展圆动画_Javascript_Html_Css_Keyframe

Javascript 暗模式和扩展圆动画

javascript html css

Javascript 暗模式和扩展圆动画,javascript,html,css,keyframe,Javascript,Html,Css,Keyframe,我的页面右上角有一个夜间模式或者黑暗模式切换按钮但是，与上面的链接不同，我会像下面的代码一样切换夜间模式 HTML 我使用数据主题属性来更改模式。夜间>灯光或灯光>夜间 <body data-theme=""> <div class="toggle" id="switch" onclick="toggleDarkMode()"></div> </body>

我的页面右上角有一个夜间模式或者黑暗模式切换按钮

但是，与上面的链接不同，我会像下面的代码一样切换夜间模式

HTML 我使用数据主题属性来更改模式。夜间>灯光或灯光>夜间

<body data-theme="">
    <div class="toggle" id="switch" onclick="toggleDarkMode()"></div>
</body>

我需要你的建议，如何切换夜间模式与扩大循环动画与关键帧。提前谢谢

这样试试

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

这样试试

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

您可以根据数据主题属性使用对象来定位主体，并对其进行适当的样式设置

函数切换暗码{ var dataTheme=$'body'.attr'data-theme'；如果dataTheme=='dark'{ $'body'.attr'data-theme'，'light'； }否则{ $'body'.attr'data-theme'，'dark'； } }; 正文[数据主题=光]{ 背景色：白色；颜色：黑色； } 正文[数据主题=黑色]{ 背景色：黑色；颜色：白色； } 你好，世界

切换主题您可以根据数据主题属性使用对象来定位主体，并对其进行适当的样式设置

切换主题

对此，一个非常简单但有效的解决方案是创建一个类dark，您可以在其中放置所有黑暗模式样式。然后在click eventListener上添加或删除该类

document.querySelector'.toggle'.addEventListener'click'，函数E{ var body=document.getElementsByTagName'body'[0]； body.className=body.className！='dark'&&'dark'； } .黑暗{ 背景：黑色；颜色：白色； } 你好，世界

暗模式

对此，一个非常简单但有效的解决方案是创建一个类dark，您可以在其中放置所有黑暗模式样式。然后在click eventListener上添加或删除该类

暗模式