如何使用 :root，而不是 class

Question

我想在这里使用 :root 而不是 class，我该怎么做？

这是我能做到的吗？

这就是全部，或者我在代码中尝试做的所有事情。

这就是:root。

:root {
  }

这是我的工作代码。 https://jsfiddle.net/s6xocny3/

如果可能，我将如何做到这一点？

这个可以更新和修复吗？可以修改吗？

此外，我没有使用 setInterval。

   (function randomBackground() {
      const classNames = [
        "bg1",
        "bg2",
        "bg3",
        "bg4",
        "bg5",
        "bg6",
        "bg7",
        "bg8",
        "bg9"
      ];
    
      const random = Math.floor(Math.random() * classNames.length);
      document.querySelector("body").classList.add(classNames[random]);
    }());

.bg1 {
  --color-a: linear-gradient(120deg, #155799, #159957);
}

.bg2 {
  --color-a: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

.bg3 {
  --color-a: linear-gradient(45deg, #102eff, #d2379b);
}

.bg4 {
  --color-a: linear-gradient(90deg, #360033 30%, #0b8793 100%);
}

.bg5 {
  --color-a: linear-gradient(115deg, #0a0e88, #00b1ce);

}

.bg6 {
  --color-a: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

.bg7 {
  --color-a: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

.bg8 {
  --color-a: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

.bg9 {
  --color-a: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-image: var(--color-a);
  background-repeat: no-repeat;
}

Answer 1

您可以使用 setProperty 重新定义自定义 css 属性的值。例如：

document
  .documentElement
  .style
  .setProperty('--dynamic-background', bgs[random]);

这是一个与您类似的代码段，它仅使用 1 个自定义 css 属性并通过 javascript:

更新其值

function randomBackground() {
  const bgs = [
    "linear-gradient(120deg, #155799, #159957)",
    "linear-gradient(0deg, #522db8 0%, #1c7ce0 100%)",
    "linear-gradient(45deg, #102eff, #d2379b)",
    "linear-gradient(90deg, #360033 30%, #0b8793 100%)",
    "linear-gradient(115deg, #0a0e88, #00b1ce)",
    "linear-gradient(0deg, #522db8 0%, #1c7ce0 100%)",
    "linear-gradient(0deg, #522db8 0%, #1c7ce0 100%)",
    "linear-gradient(0deg, #522db8 0%, #1c7ce0 100%)",
    "linear-gradient(0deg, #522db8 0%, #1c7ce0 100%)",
  ]
    
    const random = Math.floor(Math.random() * bgs.length);

    document
      .documentElement
      .style
      .setProperty('--dynamic-background', bgs[random]);
};

  randomBackground();

:root {
  --dynamic-background: linear-gradient(120deg, lime, red);
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-image: var(--dynamic-background);
  background-repeat: no-repeat;
}

Answer 2

设置为 :root，您的颜色变量，然后将 background-image: var(--color-a); 更改为随机颜色。

(function randomBackground() {
  const varNames = [
    "color-a",
    "color-b",
    "color-c"
  ];

  const random = Math.floor(Math.random() * varNames.length);
  document.body.style.backgroundImage = 'var(--' + varNames[random] + ')';
}());

:root {
  --color-a: linear-gradient(120deg, #155799, #159957);
  --color-b: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
  --color-c: linear-gradient(45deg, #102eff, #d2379b);
  /* ... */
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-image: var(--color-a);
  background-repeat: no-repeat;
}

如何使用 :root，而不是 class

How to use :root, instead of a class

javascript

css

css-selectors