Question

以下使用按钮在样式表之间进行交换：

<!DOCTYPE html>
<html>
<head>
<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</h2>
<button onclick="swapStyleSheet('dark.css')">Dark Style Sheet</button>
<button onclick="swapStyleSheet('blue.css')">Blue Style Sheet</button>
<button onclick="swapStyleSheet('default.css')">Default Style Sheet</button>
</body>
</html>

我想使用相同的功能，但不是使用按钮，而是可以通过从下拉框中选择样式表来进行交换。我使用链接设置了这样的一个：

<div class="dropdown-content">
                    <a href="swapStyleSheet('default.css')">Default</a>
                    <a href="swapStyleSheet('dark.css')">Dark</a>
               </div>

在浏览器中加载后，点击这些链接会将我带到“无法找到页面”。我假设我已经以错误的格式编写了链接，我该怎么做才能修复它们？谢谢！

如果此问题中的任何内容不清楚，请在投票前通知我。我是SO的新手，我想要做对！谢谢！

Answer 1

您可以使用onclick事件，如下所示

<div class="dropdown-content">
                <a href="#" onclick="swapStyleSheet('default.css')">Default</a>
                <a href="#" onclick="swapStyleSheet('dark.css')">Dark</a>
           </div>

我建议你使用像jQuery这样的库。

如何使用下拉框更改样式表？

1 个答案: