我有两种风格:
.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 方面的限制?或者浏览器在样式和尺寸之间交换时是否存在问题?
最佳答案
我无法用最基本的页面重现问题(见下文),所以也许这是其他一些覆盖高度和宽度的 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>
关于jquery的removeClass,addClass问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4475672/