Question

使用隐藏复选框创建具有状态的样式 - 例如，当设置下拉菜单，自定义复选框等动画时 - 是一种非常流行的技术。使用JavaScript也可以很容易地做到这一点。

这两种策略都有任何缺点吗？我正在寻找性能，渲染/重绘/重排，兼容性，代码标准，SEO等方面的差异。

＆＃13;

function toggle() {
  var cb = document.getElementById('checkbox-js');
  if (cb.className === 'checkbox') {
    cb.className = "checkbox checked";
  } else {
    cb.className = "checkbox";
  }
}

＆＃13;

input[type="checkbox"] {
  display: none;
}

.checkbox {
  display: inline-block;
  font-size: 20px;
  border: 1px solid #AAA;
  width: 32px;
  height: 32px;
  line-height: 32px;
  vertical-align: middle;
}

.checkbox:before {
  width: 32px;
  height: 32px;
  content: "x";
  color: white;
  text-align: center;
  display: inline-block;
}

input[type="checkbox"]:checked + .checkbox:before {
  color: #333;
}

.checkbox.checked:before {
  color: #333;
}

＆＃13;

<div class="css-only">
  <label>
    CSS Only:
    <input placeholder="Name" type="checkbox" />
    <span class="checkbox"></span>
  </label>
</div>
<br>
<br>
<br>
<div class="with-js">
  <label>
    With JS:
    <span onClick="toggle()" class="checkbox" id="checkbox-js"></span>
  </label>
</div>

＆＃13;

Answer 1

这两种策略都有回退

当然有。

复选框是：<input type='checkbox' />

正在将输入提交回服务器。

所以你可以阅读他们的价值观。这就是html的工作原理。

使用span不会以这种方式提供任何内容。

Answer 2

我将这些问题解释为：您应该将自己的状态保留在DOM还是JavaScript中？

这两种解决方案都有效，但更好地与复杂性有关。如果您所做的只是切换复选框的状态，我会说任何一种方法都没问题。请记住，与DOM的任何交互都很慢，但复选框上的一次或两次重新绘制不会成为问题。

如果你的模型和逻辑变得更复杂，那么保持JavaScript中的状态可能是更好的方法。例如：您有一个复选框列表，您只能检查4。

哪个更适合CSS状态：复选框或javascript？

2 个答案: