基于JavaScript或jQuery实现网站夜间/高亮模式

创建夜间/高亮模式的步骤:

创建一个HTML文档。

为文档文件以及黑暗模式创建CSS。

添加一个开关转换器按钮,以在明暗模式之间进行切换。

使用javascript或jQuery代码向开关转换器添加功能,以在明暗模式之间切换。

示例1:以下示例演示了使用JQuery代码在明暗模式之间进行切换。它基本上通过使用函数hasClass(),addClass()和removeClass()方法来工作。



  
  
    
    
    
      Dark Mode
    
    
    
  
  
  
    
Dark mode: OFF

GeeksforGeeks

A Computer Science Portal for Geeks

Light and Dark Mode

Click on the switch on top-right to move to dark mode.

示例2:以下示例演示了通过在JavaScript代码中使用toggle()函数在高亮模式和夜间模式之间进行切换。



  
  
    
    
    
      Dark Mode
    
    
  
  
  
    

GeeksforGeeks

A Computer Science Portal for Geeks

Light and Dark Mode

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(基于JavaScript或jQuery实现网站夜间/高亮模式)