如何根据var切换样式id

时间:2013-12-05 13:17:56

标签: jquery css

我正在尝试使用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>

3 个答案:

答案 0 :(得分:0)

代码中有太多错误。

首先,请阅读样式标记: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块是没有意义的。

答案 1 :(得分:0)

我会根据样式值向正文添加一个类:

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

然后相应地设置css。因此,您可以轻松地为每种类型添加更多样式。
例如:

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

答案 2 :(得分:0)

试试这段代码:

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