目前我使用三个小的外部 css 文件来更改我网站的主题颜色并且它们运行良好。这些主题适用于我网站上的所有页面,并且可供视障用户使用。但是,我想减少对服务器的请求数。
是否可以将这三个文件合并为一个文件并在选择时单独调用,类似于媒体查询的工作方式?
最佳答案
是的,您当然可以将这些组合到一个文件中,并且仍然单独应用每个主题。
您可以为每个主题的特定样式添加特定类的前缀。
然后要在主题之间切换,您可以将该类应用于 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/