基於變量設置jQuery .css（）

我試圖將margin-top和margin-left值設置爲元素各自大小的一半以便居中。然而，它左側和頂部只有50％。基於變量設置jQuery .css（）

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);

來源

2013-08-26 spriore

小提琴。 –

試試這個：

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，就可以避免m多次重畫和/或迴流（需要引用）。

來源

2013-08-26 01:38:45 pdoherty926

都沒有工作。 – spriore

錯誤，是不是$ img DOM元素的集合？ $ width和$ height的值是多少？ – pdoherty926

我正在根據某些規格製作幻燈片。有不同的圖像大小，其目的是從圖像中拉出圖像的高度和寬度。 – spriore

jQuery中的保證金左是marginLeft 拆下儀表板的中間，你可以嘗試

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

來源

2013-08-26 01:45:07

' - $ height/2'仍然是一個字符串和一個無效的margin-top值。 – dc5

$（'＃boxOverlay'）.css（'marginTop'， - $ height/2）; –

擺脫圍繞您要使用的變量的單引號的。通過在你的變量周圍添加引號，你實際上傳遞的是函數[.css（）]，而不是變量。

MDN - Strings

來源

2013-08-26 01:50:29 theatlasroom

基於變量設置jQuery .css（）

回答

相關問題