我想从html:<html样式＝">>
例如：
<html style="--athens-gray:#121212; --alabaster:#1E1E1E; --black:#ffffff; --white:#000000;">
应为<html>。
这是我的脚本：
const themes = {
dark: {
'--white': '#000000',
},
light: {
'--white': '#ffffff',
},
};
function lighttheme() {
const theme = themes["dark"];
for (var variable in theme) {
document.documentElement.style.setProperty(variable, theme[variable]);
};
}:root {
--athens-gray: #e9e8ec;
--alabaster: #f8f8f8;
--black: #000000;
--white: #ffffff;
}
body {
background-color: var(--white);
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Settings</title>
</head>
<body>
<button type="button" onClick="lighttheme();">Click Me!</button>
</body>
</html>您可以通过以下代码做到这一点：
document.getElementsByTagName("html")[0].removeAttribute("style")
例如：
const themes = {
dark: {
'--athens-gray': '#121212',
'--alabaster': '#1E1E1E',
'--black': '#ffffff',
'--white': '#000000',
},
light: {
'--athens-gray': '#e9e8ec',
'--alabaster': '#f8f8f8',
'--black': '#000000',
'--white': '#ffffff',
},
};
function lighttheme() {
const theme = themes["dark"];
for (var variable in theme) {
document.documentElement.style.setProperty(variable, theme[variable]);
};
}
function removeStyle(){
document.getElementsByTagName("html")[0].removeAttribute("style");
}:root {
--athens-gray: #e9e8ec;
--alabaster: #f8f8f8;
--black: #000000;
--white: #ffffff;
}
body {
background-color: var(--white);
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Settings</title>
</head>
<body>
<button type="button" onClick="lighttheme();">Click Me!</button>
<button type="button" onClick="removeStyle()">Remove Style!</button>
</body>
</html>如果我评论javascript代码，你会看到页面的颜色变红。