Javascript vs CSS for swapping elements

我有一個相當長的（〜100字段）表單，它具有某些元素在「快速」和「完整」引號之間切換。這將75個字段從隱藏切換到可見。目前，我通過一些簡單的jQuery做到這一點：Javascript vs CSS for swapping elements

jQuery('.full_quote').show(); 
jQuery('.quick_quote').hide();

我意識到，這可能會以不同的方式使用CSS做的工作對我來說來完成：

## Javascript: 
    jQuery('#quote_form').toggleClass("full_quote quick_quote"); 

## CSS: 
    form.toggle-form.full_quote .quick_quote {display: none;} 
    form.toggle-form.quick_quote .full_quote {display: none;}

所以大頭問題是：在性能方面更好用？

我最初的想法是迭代jQuery結果的開銷比CSS要花費更多的時間。然而，我沒有辦法測試這個，所以我很好奇社區的經驗。

來源

2013-01-10 Jack M.

我會盡可能使用CSS。 – bfavaretto

找到已經完成的測試：http://jsperf.com/jquery-show-hide-vs-css-display-none-block/2 – j08691

聽起來像是對我不成熟的優化。您需要在*巨量*元素上更改顯示狀態，才能使用任一方法注意到性能問題。 – zzzzBov

而不是定義新的自定義類，或使用jQuery的show和hide方法，我實際上建議第三個選項。

添加[hidden]屬性到任何元素都需要被隱藏，並刪除該屬性時，需要顯示：

_JS：

$('.foo').attr('hidden', true);

要確保這是支持跨瀏覽器，你需要添加一點CSS的：

_CSS：

[hidden] { 
    display: none !important; 
    visibility: hidden !important; 
}

This also gives you the ability to override how "hidden" elements are styled, which can be useful for debugging.

當你想顯示元素，只需取下[hidden]屬性：

_JS：

$('.foo').attr('hidden', false);

這將是很好，如果jQuery的實施show和hide利用[hidden]，而不是開發商在使用show時需要小心，因爲它會覆蓋display的任何樣式表聲明，因爲它會在內嵌樣式中添加display樣式。

來源

2013-01-10 20:41:05 zzzzBov

好的答案！我將開始使用它。 – jmeas

兩者基本相同。 JQuery在內部做了一個非常相似的邏輯。（見How does jquery's show/hide function work?）。而且它不像你的CSS apprach完全不使用JavaScript（在這種情況下，這將是更好的選擇）

所以，

jQuery('.full_quote').show(); 
jQuery('.quick_quote').hide();

讓（你使用JQuery無論如何，爲什麼不感使用它的所有功能）更易讀，並且

來源

2013-01-10 20:26:55 Nivas

Javascript vs CSS for swapping elements

回答

相關問題