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

时间:2018-09-06 09:04:36

标签: javascript css css3 theming css-variables

我有一个完整的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属性?当我取消最后一行的注释时,框中的颜色不再更改。

1 个答案:

答案 0 :(得分:2)

在脚本中,您正在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);
}