gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 17:44:11 24 4
gpt4 key购买 nike

目前我使用三个小的外部 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com