那些遇到过的问题

触发单选按钮的选中选择器时是否可以更改 CSS 变量？

Eli*_*zio 5 css lcd opacity checked css-variables

我有以下 CodePen: Test LCD with CSS Variables，在其中单击具有特定数字的标签时，会根据我确定模拟 BCD 到 7 段显示解码器的代数方程使适当的 LCD 段“点亮” ，为了模拟液晶显示器...

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

段 A（顶部段）应更改如下：

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

其中“on”的不透明度为 1，“off”的不透明度为 0.05。

然而，即使我们的初始默认值为 0（开启），点击比如说 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>
Run Code Online (Sandbox Code Playgroud)

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;
}
Run Code Online (Sandbox Code Playgroud)

Tem*_*fif 3

对于您的实际代码，这是不可能的。从规格来看：

\n\n
\n

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

\n
\n\n

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

\n\n

这是一个可以更好地理解该问题的基本示例：

\n\n

\r\n
\r\n
:root {\r\n  --c:red;\r\n}\r\n\r\n.box {\r\n  /* --c:blue (uncomment this to change the color)*/\r\n}\r\n\r\n.element {\r\n  background:var(--c);\r\n  height:50px;\r\n}\r\n\r\n.extra {\r\n  --c:green; /* this will do nothing */\r\n}
Run Code Online (Sandbox Code Playgroud)\r\n
<div class="box">\r\n  <div class="element"></div>\r\n</div>\r\n<div class="extra"></div>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n\n

在上面的示例中，更改内部的自定义属性extra不会改变任何内容element（这相当于您的输入元素）。如果更改内部的值，box可能会影响 ，element因为它是父元素，我们将拥有继承。

\n\n

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

\n\n

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

\n\n

\r\n
\r\n
:root {\r\n  --a:0;\r\n  --b:0;\r\n  --c:0;\r\n}\r\n\r\n.wrapper > div{\r\n  height:50px;\r\n  width:50px;\r\n  display:inline-block;\r\n  margin:10px;\r\n}\r\n\r\n.a {\r\n  background:rgb(calc(var(--a)*255),0,0);\r\n}\r\n.b {\r\n  background:rgb(calc(var(--b)*255),calc(var(--b)*255),0);\r\n}\r\n.c {\r\n  background:rgb(calc(var(--c)*255),0,calc(var(--c)*255));\r\n}\r\n\r\n\r\n#n1:checked ~ .wrapper {\r\n  --a:0;\r\n  --b:0;\r\n  --c:1;\r\n}\r\n#n2:checked ~ .wrapper {\r\n  --a:0;\r\n  --b:1;\r\n  --c:0;\r\n}\r\n\r\n#n3:checked ~ .wrapper {\r\n  --a:0;\r\n  --b:1;\r\n  --c:1;\r\n}\r\n\r\n#n4:checked ~ .wrapper {\r\n  --a:1;\r\n  --b:0;\r\n  --c:0;\r\n}\r\n#n5:checked ~ .wrapper {\r\n  --a:1;\r\n  --b:0;\r\n  --c:1;\r\n}
Run Code Online (Sandbox Code Playgroud)\r\n
<input type="radio" name="change" id="n1" >\r\n<input type="radio" name="change" id="n2" >\r\n<input type="radio" name="change" id="n3" >\r\n<input type="radio" name="change" id="n4" >\r\n<input type="radio" name="change" id="n5" >\r\n<div class="wrapper">\r\n  <div class="a"></div>\r\n  <div class="b"></div>\r\n  <div class="c"></div>\r\n</div>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n\n

\n\n

更新

\n\n

这是带有分段着色的完整示例：

\n\n

\r\n
\r\n
:root {\r\n  --s1:1;\r\n  --s2:1;\r\n  --s3:0;\r\n  --s4:1;\r\n  --s5:1;\r\n  --s6:1;\r\n  --s7:1;\r\n}\r\n\r\n.wrapper{\r\n  height:150px;\r\n  width:100px;\r\n  display:block;\r\n  margin:10px;\r\n  background:\r\n    linear-gradient(red,red) top         /100% calc(var(--s1)*20px),\r\n    linear-gradient(red,red) bottom      /100% calc(var(--s2)*20px),\r\n    linear-gradient(red,red) center      /100% calc(var(--s3)*20px),\r\n    linear-gradient(red,red) top right   /calc(var(--s4)*20px) 50%,\r\n    linear-gradient(red,red) top left    /calc(var(--s5)*20px) 50%,\r\n    linear-gradient(red,red) bottom right/calc(var(--s6)*20px) 50%,\r\n    linear-gradient(red,red) bottom left /calc(var(--s7)*20px) 50%;\r\n  background-color:#000;\r\n  background-origin:content-box;\r\n  background-repeat:no-repeat;\r\n  padding:20px;\r\n}\r\n\r\n#n1:checked ~ .wrapper {\r\n  --s1:0;\r\n  --s2:0;\r\n  --s3:0;\r\n  --s4:1;\r\n  --s5:0;\r\n  --s6:1;\r\n  --s7:0;\r\n}\r\n#n2:checked ~ .wrapper {\r\n  --s1:1;\r\n  --s2:1;\r\n  --s3:1;\r\n  --s4:1;\r\n  --s5:0;\r\n  --s6:0;\r\n  --s7:1;\r\n}\r\n\r\n#n3:checked ~ .wrapper {\r\n  --s1:1;\r\n  --s2:1;\r\n  --s3:1;\r\n  --s4:1;\r\n  --s5:0;\r\n  --s6:1;\r\n  --s7:0;\r\n}\r\n\r\n#n4:checked ~ .wrapper {\r\n  --s1:0;\r\n  --s2:0;\r\n  --s3:1;\r\n  --s4:1;\r\n  --s5:1;\r\n  --s6:1;\r\n  --s7:0;\r\n}\r\n#n5:checked ~ .wrapper {\r\n  --s1:1;\r\n  --s2:1;\r\n  --s3:1;\r\n  --s4:0;\r\n  --s5:1;\r\n  --s6:1;\r\n  --s7:0;\r\n}\r\n\r\n#n6:checked ~ .wrapper {\r\n  --s1:1;\r\n  --s2:1;\r\n  --s3:1;\r\n  --s4:0;\r\n  --s5:1;\r\n  --s6:1;\r\n  --s7:1;\r\n}\r\n\r\n#n7:checked ~ .wrapper {\r\n  --s1:1;\r\n  --s2:0;\r\n  --s3:0;\r\n  --s4:1;\r\n  --s5:0;\r\n  --s6:1;\r\n  --s7:0;\r\n}\r\n#n8:checked ~ .wrapper {\r\n  --s1:1;\r\n  --s2:1;\r\n  --s3:1;\r\n  --s4:1;\r\n  --s5:1;\r\n  --s6:1;\r\n  --s7:1;\r\n}\r\n\r\n#n9:checked ~ .wrapper {\r\n  --s1:1;\r\n  --s2:1;\r\n  --s3:1;\r\n  --s4:1;\r\n  --s5:1;\r\n  --s6:1;\r\n  --s7:0;\r\n}
Run Code Online (Sandbox Code Playgroud)\r\n
<input type="radio" name="change" id="n1" >1\r\n<input type="radio" name="change" id="n2" >2\r\n<input type="radio" name="change" id="n3" >3\r\n<input type="radio" name="change" id="n4" >4\r\n<input type="radio" name="change" id="n5" >5\r\n<input type="radio" name="change" id="n6" >6\r\n<input type="radio" name="change" id="n7" >7\r\n<input type="radio" name="change" id="n8" >8\r\n<input type="radio" name="change" id="n9" >9\r\n<div class="wrapper">\r\n  \r\n</div>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n\n

\n\n

获取有关 CSS 变量作用域的更多详细信息的相关问题：CSSscoped custom propertyignorewhenusedtocalcvarinouterscope

\n

归档时间：

查看次数：

392 次

最近记录：

7 年 前
用于在外部作用域中计算var时忽略CSS作用域自定义属性 9
更多相关链接
相关归档
为什么不:before和:after伪元素与`img`元素一起使用？ 115
如何在失去焦点的情况下检查从DOM中消失的html元素？ 97
使用JavaScript检查元素CSS显示 72
使用CSS更改当前页面的链接颜色 41
如何嵌入响应宽度的PDF文件 32
jQuery:如果完成,按需加载css +回调 30
改变字体真棒图标的宽度 26
Div的重新排序 21
样式方式或填充/边距元素 17
在WPF中使用另一个控件作为不透明蒙板？ 7
难疑归档
在JavaScript中深度克隆对象的最有效方法是什么？ 5181
不同浏览器中URL的最大长度是多少？ 4676
如何计算C#中某人的年龄？ 1754
如何在Java中拆分字符串 1564
我怎样才能存储特定文件？ 1422
何时使用虚拟析构函数？ 1420
如何将键/值对添加到JavaScript对象？ 1270
有条件地申请课程的最佳方式是什么？ 1172
require,include,require_once和include_once之间的区别？ 1166
Objective-C中的typedef枚举是什么？ 1081