哪個更適合CSS狀態：checkbox或javascript？

使用隱藏複選框創建具有狀態的樣式 - 例如，當動畫下拉，自定義複選框等時 - 是一種非常流行的技術。使用JavaScript來做同樣的事也很容易。哪個更適合CSS狀態：checkbox或javascript？

這兩種策略都有什麼缺點嗎？我在任何一個策略尋找性能差異，呈現/重繪/迴流，兼容性，代碼規範，SEO等

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

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; 
 
}

<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>

來源

2015-05-04 ecc

是否有任何回退

當然有。

複選框是：<input type='checkbox' />

輸入被提交回服務器。

所以你可以閱讀它們的值。這是HTML的工作原理。

使用span沒有提供這種方式。

來源

2015-05-04 13:55:41

是的，我想如果我想要的只是一個複選框，這是一個有效的點。我後悔在我的例子中使用複選框：P – ecc

我把這個問題解釋爲：你應該把你的狀態保持在DOM還是JavaScript中？

這兩種解決方案都可以工作，但更好的是與複雜性有關。如果你正在做的是切換複選框的狀態，我會說任何一種方法都可以。請記住，任何與DOM的交互都很慢，但在複選框上重新繪製一個或兩個圖形不會是個問題。

如果您的模型和邏輯變得更加複雜，那麼保持JavaScript中的狀態可能是更好的方法。例如：你有一個複選框列表，你只能檢查4.

來源

2015-05-04 14:02:45 Halcyon

我只想控制二進制動畫，如複選框，切換，下拉菜單和手風琴。 DOM可能或多或少複雜，但對我來說，邏輯總是很簡單。 – ecc

哪個更適合CSS狀態：checkbox或javascript？

回答

相關問題