jquery - 基于变量设置 jQuery .css()

Question

我正在尝试将 margin-top 和 margin-left 值设置为元素各自大小的一半，以便将其居中。然而，它只在左侧和顶部增加了 50%。

    var $img = document.getElementsByClassName('box'); 
    var $width = $img.clientWidth;
    var $height = $img.clientHeight;
    $('#overlay').append('<div id="boxOverlay"></div>');
    $('#boxOverlay').css('position', 'fixed');
    $('#boxOverlay').css('top', '50%');
    $('#boxOverlay').css('margin-top', '-$height/2');
    $('#boxOverlay').css('left', '50%');
    $('#boxOverlay').css('margin-left', '-$width/2');
    $('#boxOverlay').css('max-height','80%');
    $('#boxOverlay').css('max-width','90%');
    $('#boxOverlay').height($height);
    $('#boxOverlay').width($width);

Answer 1

试试这个:

var $img = $('.box');
var $width = $img.width();
var $height = $img.height();
// ...
$('#boxOverlay').css('margin-top', (($height / 2) * -1));
$('#boxOverlay').css('margin-left', (($width / 2) * -1));

Fiddle

此外，将样式对象传递给 css 方法是最佳做法:

var styles = {
    'margin-top': (($height / 2) * -1),
    'margin-left': (($width / 2) * -1)
};

$('#boxOverlay').css(styles);

使用这种方法，您只需查询一次 DOM，就可以避免多次重绘和/或回流(需要引用)。