如何从 <html> 中删除样式

Question

我想从 html 中删除样式属性：style="">

例如：

<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>

Answer 1

您可以通过以下代码完成此操作：

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 代码，您会看到页面的颜色变红。

如何从 <html> 中删除样式

How to remove style from <html>

html

css

styles