使用appendTo后如何获得宽度和高度

时间:2014-06-02 03:56:30

标签: javascript jquery

基本上,我有一个名为'wrapper'的父div,我正在添加其他div:divImg,计数器和标题。然后我以'wrapper'为中心。

将div添加到'包装器'工作正常。我坚持如何集中'wrapper'。出于某种原因,我无法获得“包装”的宽度和高度。使用appendTo后。它与高度总是一样的。

使用appendTo后如何获得宽度和高度,请参阅下面的代码:

function appendImage() {
var wrapperWidth;
var wrapperHeight;
var windowWidth = $(window).width();
var windowHeight = $(window).height();

var wrapper = $("#modal-wrapper");

var divImg = $("<div></div>")
    .hide()
    .attr("id", "container-img")
    .appendTo(wrapper);

var counter = $("<p></p>")
    .hide()
    .addClass("slideshowCounter")
    .text(text goes here...)
    .appendTo(wrapper);

var caption = $("<p></p>")
    .hide()
    .addClass("imgCaption")
    .text(caption goes here...)
    .appendTo(wrapper);

// preload the image
var img = new Image();
    img.src = src;
    img.onload = function() {
        // set the image width / height
        $(this).width(this.width).height(this.height).appendTo(divImg);

        wrapperWidth = wrapper.outerWidth();

        // ERROR, always the same width
        alert(wrapperWidth);

        wrapperHeight = wrapper.outerHeight();

        wrapper.css({
            width: wrapperWidth,
            height: wrapperHeight,
            left: ((windowWidth - wrapperWidth) / 2 + $(window).scrollLeft()),
            top: ((windowHeight - wrapperWidth) / 2 + $(window).scrollTop())
        }).show( "slow", function() {
            // fadein the image and other
            divImg.fadeIn(800);
        });
    }
}

0 个答案:

没有答案