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