Question

我有一个完整的CodePen here，可以正常显示问题。我正在使用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属性？当我取消最后一行的注释时，框中的颜色不再更改。

Answer 1

在脚本中，您正在for(NSDictionary *dic in array) { for (NSString *key in dictionar.allKeys) { if ([[dictionary objectForKey:key] isKindOfClass:[NSNull class]]) { [dictionary setObject:@"" forKey:key]; } } }元素上设置自定义属性。但是，在样式表中，您的自定义属性都是（通常）为body的{{1}}元素指定的。因此，:root的值html不变，而--global-primary-colour-hue的值又保持不变。然后，这个不变的值将被:root和--global-primary-colour继承-body的新值最终将永远不会被使用。

在脚本中为.box设置属性，或者将CSS规则更改为以--global-primary-colour-hue为目标，可以使您的代码正常工作而无需最后一行：

document.documentElement

body

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

为什么Cascade for CSS自定义属性不起作用？

1 个答案: