如何确定宽度尺寸是100%还是50%

时间:2016-10-12 15:44:53

标签: jquery if-statement

我有按钮id=”buttons”,允许我更改div(id=”box”)宽度。

我需要在jquery中写入,如果div宽度为50%,单击该按钮时,将div宽度更改为100%。或者,如果div宽度已经是100%,请将其更改为50%。

如何使用jquery确定宽度?我是jquery的新秀。我只是想学习。非常感谢。

3 个答案:

答案 0 :(得分:2)

问题在于,当您检查div的width()(使用jQuery)时,您将获得px而不是%中的值。
你可以做的是检查div的宽度,并将其与它的父元素的宽度进行比较:

$(function() {
  $('button').click(function() {
    if ($('div').width() == $('div').parent().width()) {
      $('div').width('50%');
    } else {
      $('div').width('100%');
    }
  });
});
div {
  width: 100%;
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click to change size</button>
<div>
  This is the div
</div>

更新

要支持缩放(可能还有其他一些边距/填充像素问题),您可以更改

if ($('div').width() == $('div').parent().width()) {

if ($('div').width()/$('div').parent().width() > 0.95) {

这是一个工作版本:

$(function() {
  $('button').click(function() {
    if ($('div').width() / $('div').parent().width() > 0.95) {
      $('div').width('50%');
    } else {
      $('div').width('100%');
    }
  });
});
div {
  width: 100%;
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click to change size</button>
<div>
  This is the div
</div>

答案 1 :(得分:1)

假设要求是:

  

如果宽度为50%,则单击按钮时将宽度更改为100%。

     

如果div宽度为100%,则单击按钮更改为50%。

(而不只是“写一个if语句”)

然后你可以使用css类和.toggleClass

创建两个css类:

.halfwidth { width:50%; }
.fullwidth { width:100%; }

并给你的div其中一个:

<div id="box" class="halfwidth"></div>

然后当您单击该按钮时,删除或添加halfwidth类并添加或删除fullwidth类。您可以使用.toggleClass()

执行此操作
$("#box").toggleClass("halfwidth fullwidth");

(以空格分隔的要切换的类列表)

运行代码段以查看此操作

$(".inner").click(function() {
  $(this).toggleClass("halfwidth fullwidth");
});
.container { border:1px solid black; width 200px; height: 50px;}
.inner { border:1px solid red; background:pink; height: 50px; cursor:pointer;}
.halfwidth { width:50%; }
.fullwidth { width:100%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <div class='inner halfwidth'>
  </div>
</div>

答案 2 :(得分:0)

我已根据我对问题的理解为此解决方案制作了代码段,告诉我们它是否有帮助。

&#13;
&#13;
$('.fp-section.active').find('.fp-slide.active');
&#13;
var button = $('#button');
var box = $('#box');
button.on('click',function(){
  var innerWidth = window.innerWidth; 
  var width =  parseInt(box.css('width'));
  
  //50% of the window.innerWidth or the box parent box will be
  var half = innerWidth/2; 
  
  //alert(innerWidth+" "+width+" "+innerWidth);
  if(width==half)
    {
      //the div with id box is actually 50%
      //so set it to 100%;
      box.css('width',innerWidth);
      }else{
        //the box with id has width of 100%
        //so set it to 100%
        box.css('width',half);
        }
})              
&#13;
&#13;
&#13;