Как переключить идентификатор стиля на основе var

Question

Я пытаюсь переключить стили CSS с помощью jQuery - просто if условие. Есть ли простой способ переключения стилей с помощью идентификатора? Я использую 2 блока CSS с разными идентификаторами.

Как это:

<style id="styleA"> 
.myDiv { 
    display: none; 
} 
</style> 

<style id="styleB"> 
.myDiv { 
    display: block; 
} 
</style> 


<div class="myDiv">Lorem</div> 


<script type="text/javascript"> 

    $(document).ready(function() 
    { 
     var style = 4; 

       if (style < 5) 
       { 
        //use css id styleA 
       } 
       else 
       { 
        //use css id styleB 
       } 
    }); 
</script> 

Answer 1

Так много ошибок в коде.

Во-первых, прочитать о теге стиле: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style

Он не использует id (для общего поведения, за исключением, как и любой другой элемент), но вы можете использовать title для альтернативных стилей (читайте здесь: http://alistapart.com/article/alternate/) или используйте атрибут scoped и поместите тег стиля внутри элемента, который нуждается в форматировании.

Однако лучшим способом было бы определить дополнительные классы в одном теге стиля для одного и того же элемента. Например:

<style> 
.myDiv.hidden { 
    display: none; 
} 

.myDiv.shown { 
    display: block; 
} 
</style> 

Тогда вопрос переключения стиля так же просто, как добавление/удаление имен классов для элементов. Конечно, вместо hidden/shown вы можете использовать имена классов, которые содержат (но не начинаются с) число из вашей переменной style.

Кроме того, ваш блок if/else не имеет смысла.

Answer 2

Я хотел бы добавить класс к телу в зависимости от значения стиля:

$('body').addClass('style'+style); 

затем установить CSS соответственно. Таким образом, вы можете легко добавить больше стилей для каждого типа.
Например:

body.style4 .myDiv{ 
    display:none; 
} 
body.style5 .myDiv{ 
    display:block; 
} 

Answer 3

попробовать этот код:

<style type="text/css"> 
    .sytle1 { 
     display: none; 
    } 

    .style2 { 
     display: block; 
    } 
</style> 


    <div id="myDiv" class="">Lorem</div> 


    <script type="text/javascript"> 

     $(document).ready(function() 
     { 
      var style = 4; 

        if (style < 5) 
        { 
         $('myDiv').addClass('style1').removeClass('style2'); 
        } 
        else 
        { 
         $('myDiv').addClass('style2').removeClass('style1'); 
        } 
     }); 
    </script>