我找到了以下堆栈 URL 答案: 如何使用下拉框更改样式表?
对于 jQuery onclick SwapStyleSheet;我构建了以下效果很好的!唯一的问题是;一旦我将我的基本 CSS 文件放入 css/ 文件夹中,并在示例行的“#”之前添加 css/:
圣灵充满的黑龙我的完整工作示例没有子文件夹“css”中的.css文件(我想学习如何将它们指向并且此基本代码仍然有效):
<!-- jQuery onclick Basic Example - Swap CSS on HTML5 Drop-Down List -->
<!-- StackOverFlow URL: -->
<!-- https://stackoverflow.com/questions/42754879/how-do-i-change-stylesheet-using- a-dropdown-box -->
<!-- Date Solved: 03/20/2024 -->
<!-- Time Solved: 08:55AM -->
<!-- Twitter/X Accounts: -->
<!-- Brandon Kastning: @BRKastning -->
<!-- Future Elected American Constitutionally Bound Public Servant, American Constitutional Officer, U.S. Senator, Brandon Kastning: @SenatorKastning -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-3.7.1.js"></script>
<title>Sharpen Your Sword Productions - (2024) - [Kastning Web-Dev Library: Swap Style Sheet from HTML5 Dropdown]</title>
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
<script>
function swapStyleSheet(sheet){
document.getElementById('pagestyle').setAttribute('href', sheet);
}
</script>
</head>
<body>
<h2>Javascript Change StyleSheet Without Page Reload | HTML5 Dropdown List</h2>
</body>
</html>
<div class="select">
<select name="html5_select_drop_down_sys_2024_dev_r2_css" id="swapStyleSheet">
<option>Sharpen Your Sword Productions (2024) [CSS Themes]</option>
<option value="<a href="#" onclick="swapStyleSheet('default.css')">Elohim Heaven & Earth Creationism [Default]</a>
<option value="<a href="#" onclick="swapStyleSheet('dark.css')">Holy Spirit Filled Black Dragon</a>
<option value="<a href="#" onclick="swapStyleSheet('light.css')">Holy Spirit Filled White Unicorn</a>
</select>
</div>
“default.css”:
h2 {
color: gold;
}
“dark.css”:
h2 {
color: black;
}
“light.css”:
h2 {
color: white;
}
当前(截至 2024 年 3 月 20 日)jQuery 未压缩 .js 文件 URL 为: https://code.jquery.com/jquery-3.7.1.js
谢谢! (如果格式稍有偏差;stackoverflow 让我将所有代码缩进 4 个空格)。
我想出了解决方法如下:
我改变了这个:
<option value="<a href="#" onclick="swapStyleSheet('dark.css')">Holy Spirit Filled Black Dragon</a>
对此:
<option value="<a href="css/" onclick="swapStyleSheet('dark.css')">Holy Spirit Filled Black Dragon</a>
问题解决了!
感谢 StackOverflow 上那些足够好心、足够积极地帮助我们菜鸟的人提供的所有重要信息和代码补救措施:)
致以诚挚的问候,