防止JS搞亂我的媒體特定樣式表

Question

我有一個div #example和一個按鈕#toggle。當你點擊#toggle時，#example通過javascript被隱藏。當你再次點擊它時顯示。

我也有隱藏這兩個元素的屏幕尺寸小於500px的移動設備的樣式表。

問題是：我點擊#toggle兩次，然後調整我的瀏覽器到< 500px。然後它顯示#example，儘管樣式規則。問題是JavaScript覆蓋了這個規則。

我該如何解決這個問題？

<style media="all and (max-width: 500px)"> 
    #example, #toggle { 
    display: none; 
    } 
</style> 

<div id="example"> 
    Example div 
</div> 
<button id="toggle" onclick="toggle()"> 
    Show/Hide 
</button> 

<script> 
    shown = true; 
    function toggle() { 
    if (shown) { 
     document.getElementById("example").style.display="none"; 
     shown = false; 
    } 
    else { 
     document.getElementById("example").style.display="block"; 
     shown = true; 
    } 
    } 
</script> 

Answer 1

該解決方案是簡單

嘗試添加類例如is-hidden而不是改變JS中的樣式。 這裏是解決方案：http://jsfiddle.net/70djv1Lu/

這是最好的做法，因爲CSS代碼應該在css文件中。