html - 如何组合3个小主题css文件然后点击选择一个

标签 html css

目前我使用三个小的外部 css 文件来更改我网站的主题颜色并且它们运行良好。这些主题适用于我网站上的所有页面,并且可供视障用户使用。但是,我想减少对服务器的请求数。

是否可以将这三个文件合并为一个文件并在选择时单独调用,类似于媒体查询的工作方式?

My experimental site

最佳答案

是的,您当然可以将这些组合到一个文件中,并且仍然单独应用每个主题。

您可以为每个主题的特定样式添加特定类的前缀。 然后要在主题之间切换,您可以将该类应用于 body 元素。

例如

.theme1 .my-css-rule{
  color: black;
}

.theme2 .my-css-rule{
  color: white;
}

.theme3 .my-css-rule{
  color: green;
}

然后要应用主题,您可以在 body 元素上设置主题的类名:

<body class="theme1">
 ...
</body>

要使用 javascript 设置主题并将其应用到主体,您可以:

<button onclick="document.body.className = 'theme1';">Apply theme 1</button>
<button onclick="document.body.className = 'theme2';">Apply theme 2</button>
<button onclick="document.body.className = 'theme3';">Apply theme 3</button>

关于html - 如何组合3个小主题css文件然后点击选择一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28554826/

相关文章:

HTML 为图像和其他文本添加了障碍

javascript - 输入 jQuery 中 'ä' ,'ö' ,'ü' 的处理

javascript - jQuery 动画试图淡化白色边框 IN

javascript - 如果 div 在 ajax 调用中动态加载,如何获取元素选择器

CSS - 自定义下拉重叠

html - 可以将参数传递给 CSS 类吗?

css - 我应该向谁提出 CSS 开发建议?

javascript - angular 更改 css 文件并生效

html - 低浏览器分辨率下网页底部的空白(CSS-网格布局)

css - 我可以使用什么工具在不同的分辨率下测试我的网络应用程序?