我有按钮id=”buttons”
,允许我更改div(id=”box”
)宽度。
我需要在jquery中写入,如果div宽度为50%,单击该按钮时,将div宽度更改为100%。或者,如果div宽度已经是100%,请将其更改为50%。
如何使用jquery确定宽度?我是jquery的新秀。我只是想学习。非常感谢。
答案 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)
我已根据我对问题的理解为此解决方案制作了代码段,告诉我们它是否有帮助。
$('.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;