时间戳

首页 > 解决方案 > 为什么 CSS 自定义属性的级联不起作用？

javascript - 为什么 CSS 自定义属性的级联不起作用？

问题描述

我在这里有一个完整的工作 CodePen显示问题。我正在使用这样的 CSS 自定义属性：

:root {
  --global-primary-colour-hue: 211;
  --global-primary-colour-saturation: 100%;
  --global-primary-colour-lightness: 50%;
  --global-primary-colour-opacity: 1;
  --global-primary-colour: hsla(
    var(--global-primary-colour-hue),
    var(--global-primary-colour-saturation),
    var(--global-primary-colour-lightness),
    var(--global-primary-colour-opacity));
}

.box {
  background-color: var(--global-primary-colour);
  height: 100px;
  width: 100px;
}

然后我设置了一个范围滑块和框来在我的 HTML 中显示颜色：

<input id="hue-range" value="0" type="range" min="0" max="360">

<div class="box"></div>

最后我想使用范围滑块来驱动--global-primary-colour-hue属性。我可以让它像这样工作：

var element = document.getElementById("hue-range");
element.onchange = function(){
  document.body.style.setProperty(
    "--global-primary-colour-hue", 
    this.value.toString());

  // Why does the box stop changing colour when I comment out this line?
  document.body.style.setProperty(
    "--global-primary-colour",
    "hsla(var(--global-primary-colour-hue),var(--global-primary-colour-saturation),var(--global-primary-colour-lightness),var(--global-primary-colour-opacity))");
}

我的问题是，为什么我必须设置--global-primary-colour属性？当我取消注释最后一行时，框中的颜色不再改变。

标签： javascriptcssthemingcss-variables

解决方案

在您的脚本中，您正在为body元素设置自定义属性。但是，在您的样式表中，您的自定义属性都（像往常一样）为:root元素html指定。所以 的值--global-primary-colour-hue不变:root，而 的值--global-primary-colour又保持不变。然后这个不变的值被bodyand继承.box——新的值--global-primary-colour-hue最终永远不会被使用。

document.documentElement在脚本中设置属性 for ，或者将 CSS 规则更改为 target body，可以让您的代码正常工作，而无需最后一行：

var element = document.getElementById("hue-range");
element.onchange = function(){
  document.documentElement.style.setProperty(
    "--global-primary-colour-hue", 
    this.value);
}
:root {
  --global-primary-colour-hue: 211;
  --global-primary-colour-saturation: 100%;
  --global-primary-colour-lightness: 50%;
  --global-primary-colour-opacity: 1;
  --global-primary-colour: hsla(
    var(--global-primary-colour-hue),
    var(--global-primary-colour-saturation),
    var(--global-primary-colour-lightness),
    var(--global-primary-colour-opacity));
}

.box {
  background-color: var(--global-primary-colour);
  height: 100px;
  width: 100px;
}
<input id="hue-range" value="0" type="range" min="0" max="360">

<div class="box"></div>

推荐阅读