你可以在.live（）中使用jQuery .css（）嗎？

我有div與class="centerMessage"。這個div在頁面加載後的一個點插入到DOM中。我想改變這個div的CSS來居中。我嘗試了下面的CSS功能，但沒有奏效。有沒有人知道一種方法來做到這一點？你可以在.live（）中使用jQuery .css（）嗎？

function centerPopup() { 
var winWidth = $(window).width(); 
var winHeight = $(window).height(); 
var positionLeft = (winWidth/2) - (($('.centerMessage').width())/2); 
var positionTop = (winHeight/2) - (($('.centerMessage').height())/2); 
$('.centerMessage').live(function(){ 
$(this).css("position","absolute"); 
$(this).css("top",positionTop + "px"); 
$(this).css("left",positionLeft + "px"); 
}); 
}

來源

2011-04-19 chromedude

的「.live（）」工具是關於處理事件的;這裏沒有涉及的事件。 – Pointy 2011-04-19 21:58:12

@好的，謝謝 – chromedude 2011-04-19 22:03:00

如果我對你要達到的目標的假設是正確的，你不需要任何Javascript來做到這一點。它可以通過一些簡單的CSS來實現。

 
.centerMessage { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -150px; /* half of the height */ 
    margin-left: -300px; /* half of the width */ 
    width: 600px; 
    height: 300px; 
    background: #ccc; 
}

演示：http://jsbin.com/awuja4

來源

2011-04-19 22:02:48 amustill

這實際上是一個非常有趣的選擇。謝謝 – chromedude 2011-04-19 22:03:56

.live()不接受只是一個函數。如果您希望在現場發生某些事情，它還需要一個事件，例如click。如果你想要的東西爲每個.centerMessage總會發生，你需要插件.livequery()

來源

2011-04-19 21:57:35 Marnix

我相信，在FF &的Webkit以下工作。

div.centerMessage{ 
    position: absolute; 
    width: /* width */; 
    height: /* height */; 
    top: 0px; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
    margin: auto; 
}

來源

2011-04-19 21:59:08

這是行不通的。「margin：auto」部分是可以的，但它只適用於沒有進行絕對定位的情況。 – Pointy 2011-04-19 22:00:59

是的，那是真的，事情是，這是一個絕對定位的div。它不符合其他內容。 – chromedude 2011-04-19 22:01:41

你試過了嗎？我總是用它來集中我的彈出窗口。 – 2011-04-19 23:10:58

我知道這已經回答了，但我想我會提供使用JavaScript像OP本來想一個working jsFiddle demo，但不是使用活（），我用的setInterval（）：

首先，我們需要後聲明中使用的幾個變量：

var $centerMessage, 
    intervalId;

的OP的問題是，他們不知道什麼時候DIV打算被創建的，所以考慮到這一點，我們創建一個函數只是做到這一點，並通過的setTimeout稱之爲（）模擬這個div創作：

function createDiv() { 

    $('<div class="centerMessage">Center Message Div</div>').appendTo("body"); 

} 

$(function() { setTimeout("createDiv()", 5000); });

最後，我們需要創建一個將檢查功能，使用的setInterval（）在100ms的速度，看是否股利已創建並在創建時，去有關修改通過jQuery的div：

function checkForDiv() { 

    $centerMessage = $('.centerMessage'); 

    if ($centerMessage.length) { 

     clearInterval(intervalId); 

     var $window = $(window), 
      winHeight = $window.height(), 
      winWidth = $window.width(), 
      positionTop = (winHeight/2) - ($centerMessage.height()/2), 
      positionLeft = (winWidth/2) - ($centerMessage.width()/2); 


     $centerMessage.css({ 

      "display" : "block", 
      "position" : "absolute", 
      "top" : positionTop.toString() + "px", 
      "left" : positionLeft.toString() + "px" 

     }); 

    } 

} 

$(function() { intervalId = setInterval(checkForDiv, 100); });

來源

2011-04-20 15:30:53

如果我真的想用JavaScript創建樣式表規則，並且可以應用於不在DOM中的元素，我可以簡單地將css規則添加到以編程方式創建的樣式標記並將其附加到頭部。 – lorefnon 2012-09-15 00:15:17

@Lorefnon - 你明白你只是低估了一年半的答案，不是嗎？另外，你也明白，這個答案只是簡單地提供了OP最初想要完成的工作版本，不是嗎？你所建議的是*另一種*完成目標的替代方式。替代解決方案不是默認錯誤。我的解決方案的工作原理，只是一個替代解決方案，以顯示它可以用jQuery/JavaScript完成，就像OP最初使用的一樣。 – 2012-09-17 16:53:49

這裏不是煽動一場激烈的戰爭，但你現在的回答提供了一個粗略的解決方案，儘管它確實解決了chromedude提供的示例場景，但它不能解決實際的問題類。如果我用class'centerMessage'添加另一個元素會發生什麼。您的解決方案不會將css屬性添加到此元素，因爲您已經過期了counter.Jquery.live會處理與將來任何時候添加的匹配選擇器的任何對象上觸發的事件。考慮到問題的題目，在這種情況下也會出現類似的行爲。 – lorefnon 2012-09-18 06:47:11

嘗試使用此

$（ 'centerMessage '）。住（' 點擊'，函數（）{

來源

2013-02-16 16:10:44 salman

請詳細說明答案。這很有幫助，但會比這更清晰 – Freakyuser 2013-02-16 16:29:54

試試這個

$('#foo').on('click', function() { 
    alert($(this).text()); 
}); 

$('#foo').trigger('click');

$('#foo').live('click', function() { 
    alert($(this).text()); 
}); 

$('#foo').trigger('click');

來源

2013-06-11 05:38:08

你可以在.live（）中使用jQuery .css（）嗎？

回答

相關問題