Question

这是我的代码，通过它我试着知道什么应该是高度＆amp; html的宽度。

.load('login.aspx', function (responseTxt, statusTxt, xhr) {
    if (statusTxt == "success") {
        //alert('data found');
        sHtml = responseTxt;
        var element = $(sHtml).find('#Container');
        var width = element.width();
        var height = element.height();

        sHtml = $(sHtml).find('#Container').html();

        alert('h ' + height + ' w ' + width);
        $sHtml = $(sHtml);
        $("#dialog2").dialog("widget").animate({
            width: '400px',
            height: '400px'
        }, {
            duration: 200,
            step: function () {
                $("#dialog2").dialog('option', 'position', 'center');
            }
        });
        $("#dialog2").css({
            height: 'auto',
            width: 'auto'
        });
        $("#dialog2").html(sHtml);

    }

    if (statusTxt == "error") {
        alert("Error: " + xhr.status + ": " + xhr.statusText);
    }
});

我检查过我有html但是高度＆amp;宽度始终保持为零。有没有办法确定什么应该是高度和＆amp; HTML的宽度？请指导。感谢

完整代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="Styles/ui-lightness/jquery-ui-1.7.2.custom.css" />
    <link rel="stylesheet" href= "Styles/Login.css" />
    <style type="text/css">
    .noTitleStuff .ui-dialog-titlebar {display:none}
    .offscreen {position: absolute; left: -999em;}
    .BusyStyles
         {
             background-image: url('../Images/ajax-loader.gif');
             background-repeat: no-repeat;
             background-position: center center;
             height: 350px;
             width: 300px;
         }

    </style>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {

        $("#opener2").click(function () {
            var $this = $(this);
            $this.toggleClass('show');

            if ($this.hasClass('show')) {

                $("<div id='dialog2'/>").dialog(
                {
                    autoOpen: false,
                    width: 50,
                    height: 50,
                    dialogClass: 'noTitleStuff',
                    draggable: true,
                    resizable: false,
                    open: function (event, ui) {
                        $(this).dialog("widget").addClass('BusyStyles');
                        $(this).css({ 'display': 'none' });
                        $(this).parent().appendTo("form");
                    }
                }).dialog('open').show()
                .load('login.aspx', function (responseTxt, statusTxt, xhr) {
                    if (statusTxt == "success") {
                        alert('data found');
                        sHtml = responseTxt;
                        var element = $(sHtml).find('#Container');
                        $(element).addClass('offscreen').show();
                        var width = element.width();
                        var height = element.height();
                        alert('h ' + height + ' w ' + width);

                        sHtml = $(sHtml).find('#Container').html();
                        $sHtml = $(sHtml)
                        $sHtml.css({ 'display': 'none' }).appendTo('div#dialog2');



                        $("#dialog2").dialog("widget").animate({
                            width: '400px',
                            height: '400px'
                        }, {
                            duration: 200,
                            step: function () {
                                $("#dialog2").dialog('option', 'position', 'center');
                            }
                        });

                        $("#dialog2").css({ height: 'auto', width: 'auto' });
                        //$("#dialog2").html(sHtml);

                    }

                    if (statusTxt == "error") {
                        alert("Error: " + xhr.status + ": " + xhr.statusText);
                    }

                });

                //$("#dialog2").dialog('open').show();


            }
            else {
                $("#dialog2").dialog("close").dialog('destroy').remove();
            }
            return false;
        });

    });


</script>

</head>
<body>
    <form id="form1" runat="server">
        <button id="opener2">open the dialog2</button>
    </form>
</body>
</html>

Answer 1

以下是我通常在没有显示元素的情况下获取元素的尺寸：

.offscreen {position: absolute; left: -999em;}

var element = $(sHtml).find('#Container');
$(element).addClass('offscreen').show();
var width = element.width();
var height = element.height();
sHtml = $(sHtml).find('#Container').html();
$(element).hide().removeClass('offscreen');
...

确定身高和高度动态获取html的宽度

完整代码

1 个答案: