Question

我需要将一个元素放在页面的正中心（使用固定定位）并需要计算预期的大小。例如，我会像这样添加HTML：

<div class="window" style="left: X; top: Y">
    <h3 class="title">Title</h3>
    <img src="file.jpg" width="300" height="200" />
    <div class="controls">Some stuff</div>
</div>

宽度将是图像宽度加上一些填充。我想通过从样式表中获取样式来确定元素的高度，然后计算正确的位置，然后用正确的样式编写HTML。

Answer 1

使用jQuery，您希望使用outerHeight和outerWidth函数。

如果没有jQuery，您希望使用offsetHeight和offsetWidth DOM属性。

请注意，这些都包括计算中的填充和边框，而jQuery height和width则不包含。可选地，outerHeight和outerWidth可以包含保证金，但offsetHeight和offsetWidth不能。

Answer 2

只有在文档被添加到文档后才会告诉您（也就是说，您无法告诉预期的大小，而且您将无法在服务器端执行此操作）。

因此，在Javascript中，将可见性设置为hidden，将其添加到文档，检查其outerHeight或使用jQuery调用$('.window').height()，根据需要重新定位，然后更改可见性到visible。

...或者，使用此插件：

jQuery(function($) {
    $.fn.vCenter = function(options) {
        var empty = {},
            defaults = {
                allowNegative : false,
                relativeToBody : true
            },
            settings = $.extend(empty, defaults, options)
        ;

        var isVisible = this.is(":visible");
        if (!isVisible) {
            this.css({visibility : "hidden"}).show();
        }
        if (settings.relativeToBody && this.offsetParent().get(0).nodeName.toLowerCase() != "body") {
            this.appendTo(document.body);
        }
        var pos = {
            sTop : function() {
                return window.pageYOffset || $.boxModel && document.documentElement.scrollTop || document.body.scrollTop;
            },
            wHeight : function() {
                if ($.browser.opera || ($.browser.safari && parseInt($.browser.version, 10) > 520)) {
                    return window.innerHeight - (($(document).height() > window.innerHeight) ? getScrollbarWidth() : 0);
                } else if ($.browser.safari) {
                    return window.innerHeight;
                } else {
                    return $.boxModel && document.documentElement.clientHeight || document.body.clientHeight;
                }
            }
        };
        return this.each(function(index) {
            if (index === 0) {
                var $this = $(this),
                    $w = $(window),
                    topPos = ($w.height() - $this.height()) / 2 + $w.scrollTop()
                ;
                if (topPos < 0 && !settings.allowNegative) topPos = 0;

                $this.css({
                    position: 'absolute',
                    marginTop: '0',
                    top: topPos //pos.sTop() + (pos.wHeight() / 2) - (elHeight / 2)
                });
                if (!isVisible) {
                    $this.css({visibility : ""}).hide();
                }
            }
        });
    };
    $.fn.hCenter = function(options) {
        var empty = {},
            defaults = {
                allowNegative : false,
                relativeToBody : true
            },
            settings = $.extend(empty, defaults, options)
        ;

        if (settings.relativeToBody && this.offsetParent().get(0).nodeName.toLowerCase() != "body") {
            this.appendTo(document.body);
        }
        return this.each(function(index) {
            if (index === 0) {
                var $this = $(this),
                    $d = $(document),
                    leftPos = ($d.width() - $this.width()) / 2 + $d.scrollLeft()
                ;
                if (leftPos < 0 && !settings.allowNegative) leftPos = 0;
                $this.css({
                    position: "absolute",
                    left: leftPos
                });
            }
        });
    };
    $.fn.hvCenter = function(options) {
        return this.vCenter(options).hCenter(options);
    };
});

用法：

$('.window').hvCenter();  // horizontal and vertical center

Answer 3

您可以使用width()和height()

获取宽度和高度

所以$('.window').height()会返回你案例中元素的计算高度。

Answer 4

你试过这个pure CSS way of centering an image in a box吗？

Answer 5

您可以使用CSS：

.window {
  margin: 0 auto;
}

确定Javascript中元素的大小

5 个答案: