I have 2 styles:
.imagebox_empty{
padding:2px 2px 2px;
border:1px dotted #E5E5E5;
width:130px;
height:130px;
ba开发者_高级运维ckground: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?
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>
Seems I have some extra styles, most likely generated from another jquery plugin somewhere.
I can see the dimension styles are getting cancelled, via firebug. Looks like I'm going fishing. yay
thanks guys for looking more into it! I wouldn't have looked so thoroughly if you hadn't verified on your end.
精彩评论