如何在点击时替换css文件?

我在做项目。在某种程度上，我想有两个按钮，一个用于更改为较亮的主题，另一个更改为较暗的主题，并将更改应用于整个网站，而不仅仅是有问题的页面

这是我有功能的页面:

ConfLayout.cshtml:

<!DOCTYPE HTML>
<html>
<head>
<title>TekSell</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="~/Content/styles.css" rel="stylesheet" />
<link href="~/Content/styles-admin.css" rel="stylesheet" />
</head>
<body id="top">
<section id="banner">
<div class="inner">
<a href="#main" class="more">Learn More</a>
</div>
</section>
<!-- Main1 -->
<div id="main">
<p style="text-align:center">Serviços</p>
<div class="inner">
<!-- Services -->
<div class="thumbnails">
<div class="box">
<a href='@Url.Action("Gallery","User")' class="image fit"><img src="~/Content/Images/gallery.jpg" /></a>
<div class="inner">
<h7>Galeria</h7>
</div>
</div>
<div class="box">
<a href='@Url.Action("Location","User")' class="image fit"><img src="~/Content/Images/location.jpg" /></a>
<div class="inner">
<h7>Localização</h7>
</div>
</div>
</div>
</div>
</div>
<!-- Main2 -->
<div class="page">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3 class="section-title">Sobre Nós</h3>
<figure><img src="~/Content/Images/logo.jpg" /></figure>
<h4>Acerca de nós</h4>
<p>Somos uma empresa fictícia de venda de software informático</p>
</div>
<div class="col-md-4">
<h3 class="section-title">Âmbito</h3>
<h4>Projeto desenvolvido no âmbito da unidade curricular de Laboratório de Desenvolvimento de Software</h4>
</div>
<div class="col-md-4">
<h3 class="section-title">Configurar página</h3>
<h4>Administrador, altere aqui o layout da página</h4>
<div class="dropdown">
<button class="dropbtn">Layout Configuration</button>
<div class="dropdown-content">
<a href="#" onclick="changeCSS('styles.css', 0);">Change to lighter theme</a>
<a href="#" onclick="changeCSS('styles-admin.css', 0);">Change to darker theme</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<h7>TekSell</h7>
<p>Email: teksell@lds.pt</p>

</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="~/Scripts/changeLayout.js"></script>
</body>
</html>

如你所见，我创建了两个css文件。"styles.css"是浅色的主题，"style -admin.css"是深色的主题。这个功能是在"div class="dropdown-content">

所发生的是，因为我有两个css文件链接，当我运行它时，默认情况下，视图假定深色主题(style -admin.css)。

这是我用来尝试更改的javascript文件:

function changeCSS(cssFile, cssLinkIndex) {
var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);
var newlink = document.createElement("link");
newlink.setAttribute("rel", "stylesheet");
newlink.setAttribute("href", cssFile);
document.getElementsByTagName("head").item(cssLinkIndex).replaceChild(newlink, oldlink);
}

缺少什么?我做错了吗?

如果你包含两个具有相同选择器的CSS文件，第二个文件将总是覆盖第一个文件。

只需使用一个<link>并更改其href。

另外，为什么加载jQuery而不使用它?

<link href="~/Content/styles.css" rel="stylesheet" />
$("link").attr("href","~/Content/styles-admin.css");

工作!

使用类似方法。预设主题颜色并像这样更改根属性

const colors =['#317EEB', '#6427BA'];
let index = 0;
function changeBackground(){
index = (index+1)%2;
document.documentElement.style.setProperty('--main-color', colors[index]);
}

:root {
--main-color: #317EEB;
}
.set-background{
background: var(--main-color);
width: 10em;
height: 10em;
}
button{
margin-top: 5px;
}

<div class="set-background">
</div>
<button onClick="changeBackground()">Change color</button>

相关内容

最新更新

热门标签：