jquery的removeClass，addClass问题

发布于 2024-10-08 08:35:22 字数 677 浏览 5 评论 0原文

我有 2 种样式：

.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 方面的限制？或者浏览器在样式和尺寸之间交换时是否存在问题？

原文

I have 2 styles:

.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;
}

I am using jquery to switch these classes in a div:

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

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

It works fine, except the width and height. I've tested this on Chrome and FF. Both work the same. The border, background, and padding change, but not the dimensions.

Does anyone know if that's a limitation on jQuery's side? Or do browsers have issues swapping between styles and honoring dimensions?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小苏打饼 2024-10-15 08:35:22

我无法用最基本的页面重现问题（见下文），所以也许这是其他一些覆盖高度和宽度的 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>

I could not reproduce the problem with the most basic page (see below), so perhaps it's an issue with some other CSS that's overriding the height and width?

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

回复收藏 0 原文