如何使用 HTML5 和 jQuery 在文件夹“css”中使用 onclick SwapStyleSheet 正确指向样式表,而不是在 1 个文件夹中全部工作?

问题描述 投票:0回答:1

我找到了以下堆栈 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 个空格)。

html jquery css onclick
1个回答
0
投票

我想出了解决方法如下:

我改变了这个:

<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 上那些足够好心、足够积极地帮助我们菜鸟的人提供的所有重要信息和代码补救措施:)

致以诚挚的问候,

© www.soinside.com 2019 - 2024. All rights reserved.