在触发单选按钮检查选择器时，CSS变量是否可以更改？

问题描述 投票：3回答：1

我有以下CodePen：Test LCD with CSS Variables，其中点击具有特定数字的标签，导致相应的LCD段被“点亮”基于我已经确定模仿BCD到7段显示解码器的代数方程，以便模拟LCD显示屏......

我目前有CSS中提到的第一个段的等式。单击CSS中的数字理论上应该导致用脉冲（0或1）填充适当的四个--input变量，然后方程式根据该段的等式确定不透明度...

细分A（顶部细分）应更改如下：

  • 0：开
  • 1：关闭
  • 2：开
  • 3：开
  • 4：关闭
  • 5：开
  • 6：开
  • 7：开
  • 8：开
  • 9：开

“on”是不透明度为1，“off”为不透明度为0.05。

但是，即使我们将初始默认值设置为0（打开），单击say，1或4，也不会更改段不透明度...

代码如下，任何人都可以指出我可能做错了什么？提前谢谢了...

HTML：

<div id="led-screen">
    <div class="digit">
        <div class="segment segment-a"></div>
        <div class="segment segment-b"></div>
        <div class="segment segment-c"></div>
        <div class="segment segment-d"></div>
        <div class="segment segment-e"></div>
        <div class="segment segment-f"></div>
        <div class="segment segment-g"></div>
    </div>
</div>
<div id="buttons">
    <label class="digit-button" for="digit-7">7</label>
    <label class="digit-button" for="digit-8">8</label>
    <label class="digit-button" for="digit-9">9</label>
    <label class="digit-button" for="digit-4">4</label>
    <label class="digit-button" for="digit-5">5</label>
    <label class="digit-button" for="digit-6">6</label>
    <label class="digit-button" for="digit-1">1</label>
    <label class="digit-button" for="digit-2">2</label>
    <label class="digit-button" for="digit-3">3</label>
    <label class="digit-button" for="digit-0">0</label>
    <input type="radio" name="digit-radio" id="digit-0" checked="checked"/>
    <input type="radio" name="digit-radio" id="digit-1" />
    <input type="radio" name="digit-radio" id="digit-2" />
    <input type="radio" name="digit-radio" id="digit-3" />
    <input type="radio" name="digit-radio" id="digit-4" />
    <input type="radio" name="digit-radio" id="digit-5" />
    <input type="radio" name="digit-radio" id="digit-6" />
    <input type="radio" name="digit-radio" id="digit-7" />
    <input type="radio" name="digit-radio" id="digit-8" />
    <input type="radio" name="digit-radio" id="digit-9" />
</div>

CSS：

:root {
    --input_0: 0; /* z */
    --input_1: 0; /* y */
    --input_2: 0; /* x */
    --input_3: 0; /* w */
    --led_r: 42;
    --led_g: 45;
    --led_b: 34;
    --led_o: 0;
    --led_o_base: 0.95;
    --led_o_offset: 0.05;
}

#led-screen {
    background-color: #b7ac90;
    width: 800px;
    height: 200px;
    display: block;
}

#digit-0:checked {
    --input_0: 0;
    --input_1: 0;
    --input_2: 0;
    --input_3: 0;   
}
#digit-1:checked {
    --input_0: 1;
    --input_1: 0;
    --input_2: 0;
    --input_3: 0;   
}
#digit-2:checked {
    --input_0: 0;
    --input_1: 1;
    --input_2: 0;
    --input_3: 0;   
}
#digit-3:checked {
    --input_0: 1;
    --input_1: 1;
    --input_2: 0;
    --input_3: 0;   
}
#digit-4:checked {
    --input_0: 0;
    --input_1: 0;
    --input_2: 1;
    --input_3: 0;   
}
#digit-5:checked {
    --input_0: 1;
    --input_1: 0;
    --input_2: 1;
    --input_3: 0;   
}
#digit-6:checked {
    --input_0: 0;
    --input_1: 1;
    --input_2: 1;
    --input_3: 0;   
}
#digit-7:checked {
    --input_0: 1;
    --input_1: 1;
    --input_2: 1;
    --input_3: 0;   
}
#digit-8:checked {
    --input_0: 0;
    --input_1: 0;
    --input_2: 0;
    --input_3: 1;   
}
#digit-9:checked {
    --input_0: 1;
    --input_1: 0;
    --input_2: 0;
    --input_3: 1;   
}

.digit {
    width: 75px;
    height: 150px;
    float: right;
    margin-right: 50px;
    margin-top: 10px;
    transform: skew(-5deg);
}

.segment-a {
    position: relative;
    left: 0;
    top: 0;
    --led_o: calc(((2 * var(--input_3) * var(--input_2) * var(--input_1) * var(--input_0)) - (2 * var(--input_3) * var(--input_2) * var(--input_0)) - (var(--input_3) * var(--input_1) * var(--input_0)) - (var(--input_3) * var(--input_1)) + (var(--input_3) * var(--input_0)) - (2 * var(--input_2) * var(--input_1) * var(--input_0)) + (var(--input_2) * var(--input_1)) + (2 * var(--input_2) * var(--input_0)) - var(--input_2) + (var(--input_1) * var(--input_0)) - var(--input_0) + 1) * var(--led_o_base) + var(--led_o_offset));
    background-color: rgba(var(--led_r), var(--led_g), var(--led_b), var(--led_o));
    /* 2wxyz-2wxz-wyz-wy+wz-2xyz+xy+2xz-x+yz-z+1 */
}
.segment-b {
    position: relative;
    transform: rotate(90deg);
    left: 41px;
    top: 21px;
}
.segment-c {
    position: relative;
    transform: rotate(90deg);
    left: 41px;
    top: 83px;
}
.segment-d {
    position: relative;
    left: 0;
    top: 104px;
}
.segment-e {
    position: relative;
    transform: rotate(90deg);
    left: -41px;
    top: 43px;
}
.segment-f {
    position: relative;
    transform: rotate(90deg);
    left: -41px;
    top: -59px;
}
.segment-g {
    position: relative;
    left: 0;
    top: -38px;
}

.segment {
    width: 60px;
    height: 20px;
}
css opacity checked lcd css-variables
1个回答
1
投票

使用您的实际代码，这是不可能的。来自specification：

自定义属性是普通属性，因此它们可以在任何元素上声明，用正常的继承和级联规则解析，可以用@media和其他条件规则进行条件化，可以在HTML的style属性中使用，可以读取或设置使用CSSOM等

如您所知，自定义属性（即CSS变量）是普通属性，因此如果您没有使用继承的父/子关系，则无法在不同元素之间共享值。

以下是更好地理解该问题的基本示例：

:root {
  --c:red;
}

.box {
  /* --c:blue (uncomment this to change the color)*/
}

.element {
  background:var(--c);
  height:50px;
}

.extra {
  --c:green; /* this will do nothing */
}
<div class="box">
  <div class="element"></div>
</div>
<div class="extra"></div>

在上面的示例中，更改extra中的自定义属性将不会更改element（这相当于您的输入元素）。如果你更改box中的值，你可以影响element，因为它是一个父元素，我们将继承。

获得所需内容的唯一方法是确保您具有父/子关系以便能够更改属性。

这是一个简化的示例，您可以根据需要进行调整：

:root {
  --a:0;
  --b:0;
  --c:0;
}

.wrapper > div{
  height:50px;
  width:50px;
  display:inline-block;
  margin:10px;
}

.a {
  background:rgb(calc(var(--a)*255),0,0);
}
.b {
  background:rgb(calc(var(--b)*255),calc(var(--b)*255),0);
}
.c {
  background:rgb(calc(var(--c)*255),0,calc(var(--c)*255));
}


#n1:checked ~ .wrapper {
  --a:0;
  --b:0;
  --c:1;
}
#n2:checked ~ .wrapper {
  --a:0;
  --b:1;
  --c:0;
}

#n3:checked ~ .wrapper {
  --a:0;
  --b:1;
  --c:1;
}

#n4:checked ~ .wrapper {
  --a:1;
  --b:0;
  --c:0;
}
#n5:checked ~ .wrapper {
  --a:1;
  --b:0;
  --c:1;
}
<input type="radio" name="change" id="n1" >
<input type="radio" name="change" id="n2" >
<input type="radio" name="change" id="n3" >
<input type="radio" name="change" id="n4" >
<input type="radio" name="change" id="n5" >
<div class="wrapper">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>

UPDATE

以下是段着色的完整示例：

:root {
  --s1:1;
  --s2:1;
  --s3:0;
  --s4:1;
  --s5:1;
  --s6:1;
  --s7:1;
}

.wrapper{
  height:150px;
  width:100px;
  display:block;
  margin:10px;
  background:
    linear-gradient(red,red) top         /100% calc(var(--s1)*20px),
    linear-gradient(red,red) bottom      /100% calc(var(--s2)*20px),
    linear-gradient(red,red) center      /100% calc(var(--s3)*20px),
    linear-gradient(red,red) top right   /calc(var(--s4)*20px) 50%,
    linear-gradient(red,red) top left    /calc(var(--s5)*20px) 50%,
    linear-gradient(red,red) bottom right/calc(var(--s6)*20px) 50%,
    linear-gradient(red,red) bottom left /calc(var(--s7)*20px) 50%;
  background-color:#000;
  background-origin:content-box;
  background-repeat:no-repeat;
  padding:20px;
}

#n1:checked ~ .wrapper {
  --s1:0;
  --s2:0;
  --s3:0;
  --s4:1;
  --s5:0;
  --s6:1;
  --s7:0;
}
#n2:checked ~ .wrapper {
  --s1:1;
  --s2:1;
  --s3:1;
  --s4:1;
  --s5:0;
  --s6:0;
  --s7:1;
}

#n3:checked ~ .wrapper {
  --s1:1;
  --s2:1;
  --s3:1;
  --s4:1;
  --s5:0;
  --s6:1;
  --s7:0;
}

#n4:checked ~ .wrapper {
  --s1:0;
  --s2:0;
  --s3:1;
  --s4:1;
  --s5:1;
  --s6:1;
  --s7:0;
}
#n5:checked ~ .wrapper {
  --s1:1;
  --s2:1;
  --s3:1;
  --s4:0;
  --s5:1;
  --s6:1;
  --s7:0;
}

#n6:checked ~ .wrapper {
  --s1:1;
  --s2:1;
  --s3:1;
  --s4:0;
  --s5:1;
  --s6:1;
  --s7:1;
}

#n7:checked ~ .wrapper {
  --s1:1;
  --s2:0;
  --s3:0;
  --s4:1;
  --s5:0;
  --s6:1;
  --s7:0;
}
#n8:checked ~ .wrapper {
  --s1:1;
  --s2:1;
  --s3:1;
  --s4:1;
  --s5:1;
  --s6:1;
  --s7:1;
}

#n9:checked ~ .wrapper {
  --s1:1;
  --s2:1;
  --s3:1;
  --s4:1;
  --s5:1;
  --s6:1;
  --s7:0;
}
<input type="radio" name="change" id="n1" >1
<input type="radio" name="change" id="n2" >2
<input type="radio" name="change" id="n3" >3
<input type="radio" name="change" id="n4" >4
<input type="radio" name="change" id="n5" >5
<input type="radio" name="change" id="n6" >6
<input type="radio" name="change" id="n7" >7
<input type="radio" name="change" id="n8" >8
<input type="radio" name="change" id="n9" >9
<div class="wrapper">
  
</div>

相关问题，以获取有关CSS变量范围的更多详细信息：CSS scoped custom property ignored when used to calc var in outer scope

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.