jquery - 根据变量设置 jQuery .css()

Question

我正在尝试将margin-topandmargin-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));

小提琴

此外，最好将样式对象传递给 css 方法：

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

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

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

Answer 2

在 jquery 中，margin-left 是 marginLeft 去掉中间的破折号你可以试试

$('#boxOverlay').css('marginTop', '-$height/2');
$('#boxOverlay').css('maxHeight','80%');
$('#boxOverlay').css('maxWidth','90%');

Answer 3

去掉要使用的变量周围的单引号。通过在变量周围添加引号，您实际上是在向函数 [.css()] 传递字符串文字而不是变量。

MDN - 字符串