代码之家 › 专栏 › 技术社区 › Muhammad Rehan Saeed

为什么CSS自定义属性的级联不起作用?[副本]

css-variables theming css3 css javascript

2

Muhammad Rehan Saeed · 技术社区 · 6 年前

我有一个完整的代码笔 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 回复 | 直到 6 年前

1

3

BoltClock 6 年前

在脚本中,设置 body :root ,的 html --global-primary-colour-hue ,以及 --global-primary-colour 反过来保持不变。这个不变的值然后被 身体 .box 新的价值观 --全局原色色调 最终永远不会习惯。

document.documentElement 或者将CSS规则更改为target 身体 相反,允许您的代码在不需要最后一行的情况下正常工作:

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>