使div'全屏'onClick？

我有一個div，我想要全屏（按窗口大小的100％寬度/高度）onClick按鈕。我將如何使用JavaScript/jQuery去解決這個問題？使div'全屏'onClick？

2012-03-07 Dean

$('div').click(function() { 
    $(this).css({ 
     position:'absolute', //or fixed depending on needs 
     top: $(window).scrollTop(), // top pos based on scoll pos 
     left: 0, 
     height: '100%', 
     width: '100%' 
    }); 
});

來源

2012-03-07 23:15:38 shaunsantacruz

謝謝！我將如何使div全屏onClick單獨按鈕？我怎樣才能讓它恢復到以前的尺寸？我的JS技能是有限的！ – Dean 2012-03-08 10:40:29

使用addclass切換類...這是一個不錯的答案.. – 2015-05-19 13:53:52

@michaelhanon隨意張貼一個你認爲更好的答案。 – shaunsantacruz 2015-05-19 14:51:33

$('div.yourdivclass').click(function(){ 
    $(this).css('height','100%').css('width','100%'); 
})

來源

2012-03-07 23:01:46

你也可以試試'$（本）.height（ '100％'），寬度（ '100％'）;' – 2012-03-07 23:03:25

你試過了什麼？什麼沒有用？看看是：

http://jsfiddle.net/6BP9t/1/

$('#box').on('click',function(e){ 
    $(this).css({ 
     width:"100%", 
     height:"100%" 
    }); 
});

來源

2012-03-07 23:02:30 Alex

我這樣做：

$('#idOfDiv').click(function() { 
    $(this).css({position:'fixed', height: '100%', width: '100%'}); 
});

jsfiffle：http://jsfiddle.net/P6tgH/

來源

2012-03-07 23:03:03 koenpeters

$('div').click(function(){ 
    var win = $(window), 
     h = win.height(), 
     w = win.width(); 
    $(this).css({ height: h, width: w }); 
});

http://jsfiddle.net/TQA4z/1/

來源

2012-03-07 23:06:47 elclanrs

這是一個替代的答案標記爲正確。此外，它給了他他要求關閉div的內容。

使用toggle類比在你的jQuery中使用css容易得多。盡你所能地將CSS與JavaScript分開。

出於某種原因，我的HTTPS正在加載JavaScript的加載該jsfiddle頁面。我點擊了Chrome地址欄中的盾牌圖標，然後選擇運行腳本。

Toggle Class Demo

喜歡的東西

$('#buttonID').click(function() { 
$("div > div").toggleClass("Class you want to add"); 
});

來源

2015-05-19 15:06:37

使div'全屏'onClick？

回答

相關問題