这是我的代码，试图添加切换网站颜色的主题按钮，所以我使用了CSS变量，我知道js代码有什么问题
const darkButton = document.getElementById('dark');
const lightButton = document.getElementById('light');
const body = document.body;
darkButton.onClick = () => {
body.classList.replace('light', 'dark');
localStorage.setItem('theme', 'dark');
};
lightButton.onClick = () => {
body.classList.replace('dark', 'light');
localStorage.setItem('theme', 'light');
};.light {
--bg: var(--gray0);
--bg-nav: linear-gradient(to right, var(--gray1), var(--gray3));
--bg-dropdown: var(--gray0);
--text: var(--gray6);
--border-color: var(--blue);
--bg-solar: var(--yellow);
}
.dark {
--bg: var(--gray5);
--bg-nav: linear-gradient(to right, var(--gray5), var(--gray6));
--bg-dropdown: var(--gray6);
--text: var(--gray0);
--border-color: var(--purple);
--bg-solar: var(--blue);
}<div>
<div class="nav-item has-dropdown">
<button className="nav-link Togglebutton" href="/">
Theme
</button>
<ul class="dropdown">
<div class="dropdown-item column">
<div id="light">light</div>
</div>
<div class="dropdown-item column">
<div id="dark">dark</div>
</div>
</ul>
</div>
</div>瘦我有这个错误
将你的 javascript 替换为
const darkButton = document.getElementById('dark');
const lightButton = document.getElementById('light');
const body = document.body;
lightButton.addEventListener("click", function() {
body.classList.replace('light', 'dark');
localStorage.setItem('theme', 'dark');
});
darkButton.addEventListener("click", function() {
body.classList.replace('dark', 'light');
localStorage.setItem('theme', 'light');
});
尝试使用onclick而不是onClick
const darkButton = document.getElementById('dark');
const lightButton = document.getElementById('light');
const body = document.body;
body.classList.add('light')
darkButton.onclick = () => {
body.classList.replace('light', 'dark');
//commented as it wont work on so snippet
//localStorage.setItem('theme', 'dark');
console.log("Im dark button");
};
lightButton.onclick = () => {
body.classList.replace('dark', 'light');
//commented as it wont work on so snippet
//localStorage.setItem('theme', 'light');
console.log("Im light button");
};.light {
--bg: var(--gray0);
--bg-nav: linear-gradient(to right, var(--gray1), var(--gray3));
--bg-dropdown: var(--gray0);
--text: var(--gray6);
--border-color: var(--blue);
--bg-solar: var(--yellow);
}
.dark {
--bg: var(--gray5);
--bg-nav: linear-gradient(to right, var(--gray5), var(--gray6));
--bg-dropdown: var(--gray6);
--text: var(--gray0);
--border-color: var(--purple);
--bg-solar: var(--blue);
}<div>
<div class="nav-item has-dropdown">
<button className="nav-link Togglebutton" href="/">
Theme
</button>
<ul class="dropdown">
<div class="dropdown-item column">
<div id="light">light</div>
</div>
<div class="dropdown-item column">
<div id="dark">dark</div>
</div>
</ul>
</div>
</div>我希望这段代码可能对您有所帮助。
class App extends React.Component {
constructor() {
super();
this.state = {
theme: ""
}
}
darkButton = () => {
this.setState({
theme:"dark"
});
window.localStorage.setItem('theme', 'dark');
};
lightButton = () => {
this.setState({
theme:"light"
});
window.localStorage.setItem('theme', 'light');
};
render() {
return (
<div className={this.state.theme}>
<div class="nav-item has-dropdown">
<button className="nav-link Togglebutton" href="/">
Theme
</button>
<ul class="dropdown">
<div class="dropdown-item column" onClick={this.lightButton}>
<div id="light">light</div>
</div>
<div class="dropdown-item column" onClick={this.darkButton}>
<div id="dark">dark</div>
</div>
</ul>
</div>
</div>
);
}
}
ReactDOM.render(<App/>, window.root);.light {
background-color: #fff;
color: #000;
}
.dark {
background-color: #000;
color: #fff;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>使用以下代码：
<html>
<head>
<script language="javascript">
function toggle(i) {
if (i == 0) {
document.body.classList.replace('light', 'dark');
localStorage.setItem('theme', 'dark');
}
if (i == 1) {
document.body.classList.replace('dark', 'light');
localStorage.setItem('theme', 'light');
}
}
</script>
</head>
<body>
<div>
<div class="nav-item has-dropdown">
<button className="nav-link Togglebutton" href="/">
Theme
</button>
<ul class="dropdown">
<div class="dropdown-item column">
<div id="light" onclick="toggle(0)">light</div>
</div>
<div class="dropdown-item column">
<div id="dark" onclick="toggle(1)">dark</div>
</div>
</ul>
</div>
</div>
</body>
</html>