Question

我在获取div的原始宽度和高度时遇到问题，没有使用代码生成的样式属性。

这就是我解决它的方式

    var currentWidth = $("#container").width();
    var currentHeight = $("#container").height();

    $("#container").removeAttr("style");


    var containerWidth = $("#container").width();
    var containerHeight = $("#container").height();

    $("#container").css("width", currentWidth, "height", currentHeight);


    $("#container").animate({
        width: containerWidth,
        height: containerHeight
    }, "slow");

这是非常糟糕的编码，它不会为高度设置动画。我想有一种更简单的方法来解决这个问题。例如，$("#container").width(ignoring style attr);

编辑，更好的表达：

在我的css文件中，容器的原始大小为500x500。但是当你点击一个链接时，它会变为800x800（添加属性样式），现在当你点击后面我希望它改回500x500但我希望代码找出原始大小以便更改。

更改#container的代码：

    $("#container").animate({
        width: 1250,
        height: 600
    }, "slow");

提前致谢！

Answer 1

更新：

保持原始宽度和高度为min-width和min-height，例如：

min-width: 500px;
min-height: 500px;

然后使用jQuery执行此操作：

$("#container").animate({
    width: "",
    height: ""
}, "slow");

Working Fiddle

Answer 2

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>
 <script type="text/javascript">
$(document).ready(function () {
    var curentDivWidth = 500;
    var curentDivHeight = 500;
    var clicked = false;
    $("#ClickMe").click(function () {
        if (!clicked) {
            $("#container").animate({
                width: 1250,
                height: 600
            }, "slow");
            clicked = true; return;
        }
        $("#container").animate({
            width: curentDivWidth,
            height: curentDivHeight
        }, "slow");
        clicked = false;
    });

});
  </script>
<title>example</title>
  </head>
  <body>
   <a href="javascript:void(0)" id="ClickMe" >click me </a>
  <div id="container" style="border:1px solid black" >
   the div 

  </div>
   </body>
   </html>

jsfiddle：http://jsfiddle.net/seekpunk/JhzAD/

获取div的宽度和高度忽略“样式”属性

2 个答案: