Question

我正在尝试使用jQuery切换CSS样式 - 简单if条件。有没有简单的方法来使用ID切换样式？我正在使用2个具有不同ID的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/）或使用{ {1}}属性并将样式标记放在需要格式化的元素中。

但是，最好的方法是在同一元素的单个样式标记中定义其他类。像这样：

scoped

然后切换样式的问题就像向元素添加/删除类名一样简单。当然，您可以使用包含（但不是以）<style> .myDiv.hidden { display: none; } .myDiv.shown { display: block; } </style>变量中的数字的类名来代替hidden/shown。

另外，你的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>

如何根据var切换样式id

3 个答案: