Question

我有以下CodePen：Test LCD with CSS Variables，在其中单击带有特定数字的标签时，基于我已确定将BCD模仿为7-的代数方程，相应的LCD段将被“点亮”。段显示解码器，以模拟LCD显示...

我目前有CSS中提到的第一段方程。从理论上讲，单击CSS中的数字应会在适当的四个var $addButton = $(".btn.add"); $addButton.on("click", function(e) { e.preventDefault(); var $cloner = $(this).closest(".clone"); $cloned.clone(true, true).insertAfter($cloner); }); var $cloned = $('.clone').clone(true, true); var $removeButton = $(".btn.remove"); $('body').on("click", '.btn.remove', function (e) { if($(".btn.remove").length == 1){ return; } e.preventDefault(); var $cloner = $(this).closest(".clone"); //console.log("a" + $cloner); $cloner.remove(); });变量中填充一个脉冲（0或1），然后该方程式根据该分段的方程式确定不透明度...

段A（最上面的段）应进行如下更改：

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

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

但是，即使我们的初始默认值为0（打开），单击说1或4都不会更改细分的不透明度...

下面的代码，有人可以指出我可能做错了什么吗？提前非常感谢...

HTML：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="clone-container">
    <div class="clone">
        <label for="select1">Select 1</label>
        <select id="select1" name="select1" class="">
            <option>Select One:</option>
            <option value="1">1</option>
        </select>
        <span class="controls">
            <a href="#" class="btn add">+</a>
            <a href="#" class="btn remove">−</a>
        </span>
    </div>
</div>

CSS：

--input

Answer 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中的custom属性将不会更改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>

更新

这是一个完整的示例，显示段颜色：

: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

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

1 个答案: