Question

我有按钮id=”buttons”，允许我更改div（id=”box”）宽度。

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

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

Answer 1

问题在于，当您检查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>

Answer 2

假设要求是：

如果宽度为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>

Answer 3

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

＆＃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;

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

3 个答案:

更新