Question

我有一个div想要全屏显示（窗口大小的100％宽度/高度）onClick按钮。我将如何使用Javascript / jQuery进行此操作？

Answer 1

$('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%'
  });
});

Answer 2

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

Answer 3

你有什么尝试？什么不起作用？看一看：

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

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

Answer 4

我会这样做：

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

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

Answer 5

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

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

Answer 6

这是标记为正确的答案的替代。而且它给了他要求关闭div的东西。

使用toggle类比在jquery中使用css容易得多。尽你所能将css与JavaScript分开。

出于某种原因，我的https正在加载jsfiddle页面加载的JavaScript。我点击了chrome地址栏中的Shield图标，然后选择运行脚本。

Toggle Class Demo

像

这样的东西

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

点击'全屏'点击？

6 个答案: