<分区>
我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。
关闭 8 年前。
我想知道如何才能达到此页面上的效果: http://templateocean.com/stamp/image-bg/2-home-style-two/index.html
在左侧有一个允许调整模板的面板。我注意到我改变了颜色，使用了不同的 css(blue.css、purple.css 等)但是一切都在“运行中”发生而无需重新加载网页。
它是如何实现的？
这是否也适用于网页上的其他元素，例如背景从图片更改为视频？
最佳答案
如果您正在寻找一种无需重新加载页面的方法，您可以使用 jQuery。
如果你真的想在你的页面上改变很多颜色，我建议给你的 body 添加一个类。然后您可以根据需要更改 CSS。
我给你做了这个(基本的)例子来澄清它:
$(function() {
$('#options button').on('click',function() {
$('body').addClass( $(this).val() );
});
});.blue main {
background: lightblue;
}
.blue main span {
border: 5px solid blue;
}
.green main {
background: lightgreen;
}
.green main span {
border: 5px solid green;
}
.yellow main {
background: lightyellow;
}
.yellow main span {
border: 5px solid yellow;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="options">
<button value="blue">blue</button>
<button value="green">green</button>
<button value="yellow">yellow</button>
</div>
<main>This is a text <span>with a span</span></main>关于html - 即时切换 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30124707/