主题切换之CSS文件篇

动态加载CSS: 利用HTML的标签,可以通过JavaScript动态改变其href属性来加载不同的CSS文件。这意味着我们可以在运行时切换整个页面的样式表,从而实现主题的变化。

分离样式: 将不同主题的样式分别放在不同的CSS文件中。例如,default_styles.css包含日间或默认主题的样式,而night_styles.css则定义了夜间模式的样式。这种分离使得每种主题的样式管理变得清晰且易于维护。

事件驱动: 通过在HTML中绑定事件(如点击事件)到JavaScript函数(如switchTheme),当用户与界面交互(如点击“切换主题”按钮)时,会触发该函数执行,进而切换CSS文件,达到改变页面主题的效果。

这一机制结合了前端页面的动态性与CSS的静态样式定义,通过简单的脚本逻辑实现了用户界面主题的即时切换.

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>主题切换示例</title><!-- 初始化时使用默认主题 --><link rel="stylesheet" href="default_styles.css" id="theme-style">
</head>
<body><!-- 主题切换按钮 -->
<button onclick="switchTheme()">切换主题</button><script src="script.js"></script>
</body>
</html>

CSS (default_styles.css)

/* 默认主题样式 */
body {background-color: #ffffff; /* 白色背景 */color: #333333; /* 深灰字体 */
}

CSS (night_styles.css)

/* 夜间主题样式 */
body {background-color: #333333; /* 深灰背景 */color: #ffffff; /* 白色字体 */
}

JavaScript (script.js)


/*** 切换页面主题的函数*/
function switchTheme() {// 获取当前主题样式链接var themeLink = document.getElementById('theme-style');// 根据当前主题链接决定切换到哪个主题if (themeLink.getAttribute('href') === 'default_styles.css') {themeLink.setAttribute('href', 'night_styles.css'); // 切换到夜间主题} else {themeLink.setAttribute('href', 'default_styles.css'); // 切换回默认主题}
}

说明
HTML: 页面中通过标签初始化加载默认主题的CSS文件default_styles.css。按钮点击事件触发switchTheme函数来切换主题。
CSS: 分别创建了两个CSS文件,default_styles.css用于定义默认(日间)主题样式,而night_styles.css定义了夜间主题的样式。这样设计允许完全独立地控制两种主题的视觉元素。
JavaScript: switchTheme函数通过检查当前加载的CSS文件链接,动态改变标签的href属性,从而在默认主题和夜间主题之间进行切换。这种方式虽然需要维护两个独立的CSS文件,但提供了最大的样式定制自由度

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/852913.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

React小记——如何理解 props 单向数据流?

通俗来讲&#xff0c;就是 props 传递的数据只能由父组件流向子组件&#xff0c;子组件对接收到的 props 数据不可以直接修改 &#xff01; 但是可以由父组件传递 状态 的同时传递 修改状态的方法&#xff0c;然后由子组件调用该方法&#xff0c;达到修改 props 的目的&#xf…

Non-zero exit code pycharm

目录 windows 设置conda代理&#xff1a; linux Conda 使用代理 4. 修改 Conda SSL 验证 pycharm 报错 exceted command pip 设置代理 Non-zero exit code 科学上网后&#xff0c;pip安装时警告报错 WARNING: Retrying (Retry(total0, connectNone, readNone, redirectNo…

Spark 面试题(九)

1. 简述Spark的DAG以及它的生成过程 &#xff1f; 在Spark中&#xff0c;DAG&#xff08;有向无环图&#xff09;是描述作业中所有RDD转换操作依赖关系的图。DAG的生成过程是Spark作业调度的关键步骤之一。以下是对Spark DAG的简述以及它的生成过程&#xff1a; DAG的概念 节…

RabbitMQ实践——利用一致性Hash交换器做带权重的调度

在《RabbitMQ实践——利用一致性Hash交换器做负载均衡》一文中&#xff0c;我们介绍了如何开启一致性hash交换器&#xff0c;并实现了消息的负载均衡&#xff0c;以达到横向扩展消费者数量的能力。 但是现实中&#xff0c;可能存在这样的场景&#xff1a;一些队列所在的机器配置…

编程入门教育游戏教案:打造互动式学习体验

编程入门教育游戏教案&#xff1a;打造互动式学习体验 在当今数字化时代&#xff0c;编程技能已成为一项重要的素养。为了帮助初学者轻松入门编程&#xff0c;本文设计了一款编程入门教育游戏教案&#xff0c;旨在通过互动式学习体验&#xff0c;提升学生的编程兴趣和技能水平…

交易文本数据:情感分析 -另类数据交易- 舆情数据

交易文本数据:情感分析 这是三章中的第一章,专门介绍使用自然语言处理(NLP)和机器学习从文本数据中提取交易策略信号。 文本数据内容丰富但高度非结构化,因此需要更多预处理才能使ML算法提取相关信息。一个关键挑战是在不丢失其含义的情况下将文本转换为数值格式。我们将介绍…

第J7周:对于ResNeXt-50算法的思考

本文为&#x1f517;365天深度学习训练营中的学习记录博客 &#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 &#x1f680; 文章来源&#xff1a;K同学的学习圈子深度学习第J6周&#xff1a;ResNeXt-50实战解析K同学的学习圈子 在 ResNeXt 网络中&#xff0c;如果…

LeRobot——Hugging Face打造的机器人领域的Transformer架构

前言 如友人邓博士所说&#xff0c;“用 Stanford aloha 课题组提供的训练数据&#xff0c;训练他们研发的 Action Chunking Transformer 动作规划模型&#xff0c;训练结果&#xff0c;能用&#xff0c;但是稳定性有待提高 要提高稳定性&#xff0c;看来必须修改 Stanford a…

STM32学习笔记(三)--EXTI外部中断详解

&#xff08;1&#xff09;配置步骤1.配置RCC 打开外设时钟2.配置GPIO 选择端口输入模式3.配置AFIO 选择要用的一路GPIO 连接至EXTI 4.配置EXTI 选择边沿触发方式 上升沿 下降沿 双边沿 选择触发响应方式 中断响应 事件响应 5.配置NVIC 选择一个合适的优先…

喜讯:NetMarvel 深度合作伙伴「点金石」斩获2024·MAMA 营销增长奖

全球市场瞬息万变&#xff0c;如何让增长做到有迹可循&#xff1f; 5月20日&#xff0c;由 AppsFlyer 举办的「2024 MAMA 移动互联网高层峰会」在三亚拉开序幕。在本届颁奖典礼上&#xff0c;NetMarvel 深度合作伙伴——点金石&#xff08;GameGoing&#xff09; 荣获「营销增长…

java技术专家面试指南80问【java学习+面试宝典】(七)

Dubbo需要 Web 容器吗&#xff1f; 不需要&#xff0c;如果硬要用 Web 容器&#xff0c;只会增加复杂性&#xff0c;也浪费资源。 PrintStream、BufferedWriter、PrintWriter的比较? PrintStream类的输出功能非常强大&#xff0c;通常如果需要输出文本内容&#xff0c;都应…

PyQt5学习系列之新项目创建并使用widget

PyQt5学习系列之新项目创建并使用widget 前言报错新建项目程序完整程序总结 前言 新建项目&#xff0c;再使用ui转py&#xff0c;无论怎么样都打不开py文件&#xff0c;直接报错。 报错 Connected to pydev debugger (build 233.11799.298)新建项目程序 # Press ShiftF10 to…

【计算机视觉】人脸算法之图像处理基础知识(一)

图像处理基础知识&#xff08;一&#xff09; 1.图像的构成 图像的构成可以包括以下几方面知识&#xff1a; 1.像素&#xff1a;图像的基本单位&#xff0c;是图像中的一个点。每个像素都有特定的位置和色彩值。在数字图像中&#xff0c;像素的颜色通常由红、绿、蓝&#xf…

本地密码记录工具-KeePass

文章目录 软件界面软件下载KeePass配置KeePass修改中文创建数据库配置数据库锁定配置账户密码为不同应用配置账号密码插件安装及使用 数据库同步 在此之前&#xff0c;没有使用过类似的账户密码记录工具&#xff0c;甚至完全没有接触过&#xff0c;由于Edge浏览器自带保存密码并…

el-date-picker 有效时间精确到时分秒 且给有效时间添加标记

el-date-picker实现有效日期做标记且时分秒限制选择范围 代码如下&#xff1a; // html部分 <el-date-pickerv-model"dateTime"type"datetime":picker-options"pickerOptions" > </el-date-picker>// js部分 /*** 回放有效日期开始时…

通过MATLAB实现PID控制器,积分分离控制器以及滑模控制器

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 通过MATLAB实现PID控制器,积分分离控制器以及滑模控制器。通过对比三个算法可知&#xff0c;采用滑模控制算法&#xff0c;其具有最快的收敛性能&#xff0c;较强的鲁棒性&…

spring 对于 XML 中自定义标签的解析

我们知道&#xff0c;在 spring 的配置文件解析时&#xff0c;通过 XmlBeanDefinitionReader 来操作&#xff0c;下面来看看对 XML 配置文件解析时&#xff0c;这个类具体是如何操作的。 入口 protected int doLoadBeanDefinitions(InputSource inputSource, Resource resour…

链路追踪-微服务小白入门(6)

背景 什么是链路追踪 随着微服务分布式系统变得日趋复杂&#xff0c;越来越多的组件开始走向分布式化&#xff0c;如分布式服务、分布式数据库、分布式缓存等&#xff0c;使得后台服务构成了一种复杂的分布式网络。在服务能力提升的同时&#xff0c;复杂的网络结构也使问题定…

inux下nvidia驱动安装-ubuntu22.04安装2060-notebook驱动

原文链接&#xff1a;linux下gcc编译安装与卸载-ubuntu22.04安装gcc-12.3.0 导言 nvidia驱动是显卡稳定运行的重要保证&#xff0c;不同的显卡有不同驱动&#xff0c;不同驱动对操作系统/cuda支持都存在一定差别。本次驱动安装主要完成2060-notebook显卡在linux系统下的驱动安…

ffmpeg封装和解封装介绍-(6)完成重封装mp4文件并截断10s~20s的视频并生成10s视频文件

源文件&#xff1a; #include <iostream> #include <thread> using namespace std; extern "C" { //指定函数是c语言函数&#xff0c;函数名不包含重载标注 //引用ffmpeg头文件 #include <libavformat/avformat.h> } //预处理指令导入库 #pragma …