如何使用 CSS 和 JavaScript 制作可更改的主题

2024-01-24

我对 CSS 和 JavaScript 还很陌生,我想知道您是否可以制作一个脚本来更改网站使用的样式表。

说:你有一个绿色主题,所有东西都是绿色的。您会怎么做,以便用户可以通过按下按钮将其更改为红色?

有谁知道如何做到这一点?


您可以为链接标签设置一个Id并在运行时切换css。

HTML

<link type="text/css" rel="stylesheet" media="all" href="../green.css" id="theme_css" />

JS

document.getElementById('buttonID').onclick = function () { 
    document.getElementById('theme_css').href = '../red.css';
};

快速演示:

    $( "#datepicker" ).datepicker();

$('button').button().on('click', function () {
  let linkHref = 'https://code.jquery.com/ui/1.11.4/themes/{THEME}/jquery-ui.css';

if ($('#swapTheme').prop('href').indexOf('pepper-grinder') >= 0) {
    $('#swapTheme').prop('href', linkHref.replace('{THEME}', 'black-tie'));
  } else {
    $('#swapTheme').prop('href', linkHref.replace('{THEME}', 'pepper-grinder'));
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
              crossorigin="anonymous"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/pepper-grinder/jquery-ui.css" id="swapTheme" rel="stylesheet">
<div id="datepicker"></div>
<button style="padding: 5px 15px;"> Switch Theme </button>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 CSS 和 JavaScript 制作可更改的主题 的相关文章

随机推荐

  • 使用 Heroku 的分支策略进行良好的 Git 部署?

    与 Git Heroku Ruby on Rails 一起使用的良好部署策略是什么 目前 我使用原始 Git 存储库的方式是 所有功能 或 故事 首先作为分支检出 然后与 master 合并并推送到 origin 任何推送到 origin
  • g++ 警告:无符号表达式 < 0 的比较始终为 false

    为了编译我的 C 代码 我使用 W标志 这会导致警告 警告 无符号表达式 我相信这被认为是一个错误并在 GCC 4 3 版本上修复 但我正在使用 GCC 4 1 这里明显有问题的代码 void FieldGroup generateCrea
  • MYSQLi bind_result分配太多内存[重复]

    这个问题在这里已经有答案了 我试图从 MYSQL 中获取多行 但是当将变量绑定到结果时 MYSQLi 会耗尽内存来分配 因为它尝试一次获取所有行并缓冲完整的 LONGBLOB 大小 即使不需要也是如此 该错误也已讨论here http bu
  • 三通管破损,采用工艺替代

    我刚刚发现使用流程替换 gt 我对此非常兴奋 但是当我尝试时 它并不总是有效 例如 这有效 cat usr share dict words tee gt tail 1 gt dev null ZZZ 这会导致管道损坏错误 cat usr
  • ASP.NET MVC3 验证问题

    我有以下视图模型 public class Bulletin1ViewModel Required public String NumberDelegations get set Required public String TravelP
  • 如何使用 dplyr 对列进行范围分组?

    我想根据列对 data table 进行分组range值 我该如何使用 dplyr 库来做到这一点 例如我的数据表如下 library data table library dplyr DT lt data table A 1 100 B
  • StandardTitanGraph java.lang.Throwable:挂钩创建跟踪错误

    我在 Windows 中运行的 scala 项目中遇到以下异常 Titan cassandra DEBUG c t t g database StandardTitanGraph 安装的关闭挂钩 Thread Thread 9 5 main
  • C++ 中多线程的 join() 和 detach() 有什么不同?

    之间有什么不同join and detach 在C 中的多线程中 做join 杀死线程 A C thread对象通常 但不总是 代表一个执行线程 这是一个操作系统或平台概念 When thread join 被调用时 调用线程将阻塞 直到执
  • Google Cloud Endpoints 对 openApi 3 的支持 [已关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 正如文档中所述 Google Cloud Endpoints 支持使用 OpenAPI 规范 2 0 版描述的 API 有计划支持3 0版
  • Solidity如何使用元组(嵌套abi)进行函数签名?

    struct Test uint ui string s function test Test t public emit Log t ui t s 我对ABI有一些了解 我使用实验性 ABIEncoderV2 选项签订了这份合同 总之 这
  • 将 .NET 像素转换为 OpenXML 格式的 Excel 宽度的公式

    我花了很多时间尝试确定使用 OpenXML 格式将 NET 像素转换为 Excel 列宽的公式 我正在使用 EPPlus 生成 xml 文档 我正在尝试确定要自动调整大小的列的宽度 我通过测量字符串来获取像素数 然后尝试将其转换为 Open
  • 调试从非托管 C++ 调用的托管 .NET 代码

    我已经阅读了 SO 上提供的解决方案 但到目前为止没有任何解决方案可以解决我的问题 我的启动项目是一个非托管 C 项目 我们将其称为 TestWrapper 目标是让 TestWrapper 调用托管 C 项目 然后该项目调用我的 C 项目
  • ojdbc14.jar 与 ojdbc6.jar

    我注意到以下差异 但没有在任何地方看到它的记录 我想知道其他人是否注意到了同样的事情 或者可以向我指出一些证明相同的文档 Env Oracle 11g JDK 1 6 iBatis PL SQL 设想 ojdbc14 jar 如果 pl s
  • 无法在 firebase 函数模拟器上提供 Express 应用程序 | EADDRINUSE:地址已在使用 :::3000

    我正在使用 firebase 函数在 firebase 上测试快速应用程序部署 但使用命令后firebase serve 我正进入 状态EADDRINUSE address already in use 3000 这是我的index js
  • Cython:在类型声明中使用导入的类

    我正在编写 Cython 0 23 程序 但我不知道如何使用cdef class我在类型声明中从不同的模块导入 这是重现该问题的片段 test py import pyximport pyximport install from mymod
  • excel vba调用带变量的子程序

    我定义了以下子例程 Sub EnterCellValueMonthNumber cells As range number As Integer range cells Select ActiveCell FormulaR1C1 numbe
  • 如何将 IDbCommandInterceptor 仅挂钩到特定类型的 DbContext?

    目前我正在添加我的实现IDbCommandInterceptor https msdn microsoft com en us library system data entity infrastructure interception i
  • 清除:两者或溢出:自动,哪个更好?

    我真的不明白有什么区别明确 两者 and 溢出 自动 我对其进行了测试 功能的工作方式相同 有人会解释为什么这两者的工作方式相同吗 从我在一些文章和问题中看到的 Overflow auto 可以在内部有浮动的容器中使用 并且使用空 div
  • 使用一个 LINQtoSQL 语句返回不同的对象

    我有一个由员工和学生实施的IPerson 我什么really想要的就是你在下面看到的 一个 LINQ 语句即可获取每种类型的 IPerson 在我调用该方法之前 这非常有效 为什么我会收到错误 这是有道理的 但我真的很难找到一种合适的方法来
  • 如何使用 CSS 和 JavaScript 制作可更改的主题

    我对 CSS 和 JavaScript 还很陌生 我想知道您是否可以制作一个脚本来更改网站使用的样式表 说 你有一个绿色主题 所有东西都是绿色的 您会怎么做 以便用户可以通过按下按钮将其更改为红色 有谁知道如何做到这一点 您可以为链接标签设