为什么Cascade for CSS自定义属性不起作用? [英] Why does the Cascade for CSS Custom Properties Not Work?

问题描述

我在此处上有完整的正常工作的CodePen.我正在使用CSS自定义属性，如下所示:

I have a full working CodePen here showing the problem. I'm using CSS custom properties like so:

: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中显示颜色:

Then I've set up a range slider and box to display the colour in my HTML:

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

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

最后，我想使用范围滑块来驱动-global-primary-color-hue 属性.我可以使它像这样工作:

Finally I want to use the range slider to drive the --global-primary-colour-hue property. I can get this to work like so:

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 属性?当我取消最后一行的注释时，框中的颜色不再更改.

My question is, why do I have to set the --global-primary-colour property? When I uncomment that last line, the colour in the box no longer changes.

推荐答案

在脚本中，您正在 body 元素上设置自定义属性.但是，在样式表中，(通常)为:root ( html 元素)指定了所有自定义属性.因此，:root 的-global-primary-color-hue 的值不变，而-global-primary-color 依次保持不变.然后，此未更改的值将被 body 和 .box 继承--global-primary-color-hue 的新值最终将永远无法获得使用.

In your script, you're setting the custom properties on the body element. However, in your stylesheet, your custom properties are all (as usual) specified for :root, the html element. So the value of --global-primary-colour-hue is unchanged for :root, and the value of --global-primary-colour in turn remains unchanged. This unchanged value then gets inherited by body and .box — the new value of --global-primary-colour-hue ends up never getting used.

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

Setting the property for document.documentElement in your script, or changing the CSS rule to target body instead, allows your code to work correctly without needing that last line:

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>

这篇关于为什么Cascade for CSS自定义属性不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！