Question

我有两种风格：

.imagebox_empty{
    padding:2px 2px 2px;
    border:1px dotted #E5E5E5;
    width:130px;
    height:130px;
    background:url('/images/misc/file_important.png') no-repeat;

}
.imagebox_full{
    padding:2px 2px 2px;
    border:1px solid #E5E5E5; !important;
    overflow:auto;
}

我正在使用jquery在div中切换这些类：

<div id="companyLogo" class="imagebox_full"></div>

$("#companyLogo").removeClass("imagebox_full").addClass("imagebox_empty");

除宽度和高度外，它工作正常。我在Chrome和FF上对此进行了测试。两者都是一样的。边框，背景和填充更改，但不是更改。

有谁知道这是否是对jQuery方面的限制？或者浏览器在样式之间交换和维护维度有问题吗？

Answer 1

我无法用最基本的页面重现问题（见下文），所以也许这是一个覆盖高度和宽度的其他CSS的问题？

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#companyLogo").removeClass("imagebox_full").addClass("imagebox_empty");
});
</script>
<style type="text/css">
.imagebox_empty{
    padding:2px 2px 2px;
    border:1px dotted #E5E5E5;
    width:130px;
    height:130px;
    background:url('/images/misc/file_important.png') no-repeat;
}
.imagebox_full{
    padding:2px 2px 2px;
    border:1px solid #E5E5E5; !important;
    overflow:auto;
}
</style>
</head>
<body>
<div id="companyLogo" class="imagebox_full">
</body>
</html>

Answer 2

似乎我有一些额外的样式，很可能是从某个地方的另一个jquery插件生成的。

我可以通过firebug看到尺寸样式被取消了。看起来我要去钓鱼了。耶

感谢大家多多关注它！如果你没有在你的身上验证，我就不会那么彻底。

jquery removeClass，addClass问题

2 个答案: