gpt4 book ai didi

javascript - 我需要在单击页面中的链接时切换样式表,以便页面以不同的颜色主题显示

转载 作者:行者123 更新时间:2023-11-28 03:18:20 25 4
gpt4 key购买 nike

HTML

<head>
<style type="text/css>
@import url("style.css") //my main css file
</style>
// css file which contains only color properties.
<link href="theme_blue.css" rel="stylesheet">
</head>

<body>
<a href="#" id="theme-blue">Click Here to switch color</a>
</body>

CSS (theme_blue.css)

body
{
background-color:#66ccff;
}

JS

$(document).ready(function() { 
$("#theme-blue").click(function() {
$("link").attr("href", "theme_blue.css");
return false;
});
});

我的问题是,当我点击链接时,网页的整个结构都丢失了,颜色也没有发生变化。我对这项技术很陌生,需要专家的帮助。请建议我解决这个问题的解决方案。

最佳答案

您的问题出在您的 jQuery 选择器上。您正在将属性 href 应用于所有链接元素,包括您的主 css 链接。我建议您提供您的链接和 ID,然后更新您的选择器:

html

<head>
<style type="text/css>
@import url("style.css") //my main css file
</style>
// css file which contains only color properties.
<link id="css_theme_blue" href="theme_blue.css" rel="stylesheet">
</head>

<body>
<a href="#" id="theme-blue">Click Here to switch color</a>
</body>

jQuery

$(document).ready(function() { 
$("#theme-blue").click(function() {
$("#css_theme_blue").attr("href", "theme_blue.css");
return false;
});
});

我可以提供另一种我实践过的解决方案吗。

我有自己的样式表,但我更改了 body 类以反射(reflect)我希望特定元素的外观。

body.blue_theme #element_1 {
background:blue;
}

body.green_theme #element_2 {
background: green;
}

然后当我想改变主题时我换掉 body 类:

$('#blue-theme-button').on('click', function() {
$(body).removeClass('green_theme').addClass('blue_theme');
}

这种方法对我来说更可取,因为所有样式都在开始时加载,并且加载新样式表时不会在较慢的机器上暂停。

关于javascript - 我需要在单击页面中的链接时切换样式表,以便页面以不同的颜色主题显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25992074/

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