获取div

Question

我有两个div，可以在点击加号或减号按钮后重新调整大小。 目前的情况不是“宽度”字样。和＆＃39;身高＆＃39;显示在两者之间。

而不是我想要显示当前大小的单词。 因此，如果我在加号上按两次（使得div 20px更大），我想通过直观地看到数字以20px的速度增长来表明。

$(".SmallerWidth").click(function () {
    $("#div1").animate({
        'width': '-=10px'
    });
    $("#div2").animate({
        'width': '-=10px'
    });
});

我做了Jsfiddle。

Answer 1

请参阅Feed：https://jsfiddle.net/p9x68vnf/2/

$("#div1").animate({'width':'+=10px'}).html($('#div1').width());
$("#div2").animate({'width':'+=10px'}).html($('#div2').width());

<强> UPD：

实际上你想要的是：

https://jsfiddle.net/p9x68vnf/5/

Answer 2

您应该在span或任何其他标记之间放置文本。并显示它的宽度和高度。

＆＃13;

＆＃13;

$(".SmallerWidth").click(function(){
	$("#div1").animate({'width':'-=10px'});
    $("#div2").animate({'width':'-=10px'});
    disp();
});   

$(".BiggerWidth").click(function(){
    $("#div1").animate({'width':'+=10px'});
    $("#div2").animate({'width':'+=10px'});
    disp();
});

$(".SmallerHeight").click(function(){
	$("#div1").animate({'height':'-=10px'});
    $("#div2").animate({'height':'-=10px'});
    disp();
});

$(".BiggerHeight").click(function(){
	$("#div1").animate({'height':'+=10px'});
    $("#div2").animate({'height':'+=10px'});
    disp();
});

function disp()
{
$(".wi").text("First Width " + $('#div1').width() + " Second Width " + $('#div2').width());
$(".he").text("First Height " + $('#div1').height() + " Second Height " + $('#div2').height());
}

＆＃13;

#div1{
    width:100px;
    height:100px;
    background:#39ACC7;
    
}
#div2{
    width:50px;
    height:50px;
    background: #B2C2D1;
    
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">First </div>
<div id="div2">Second </div>


</br></br>
<button class="SmallerWidth"> - </button>  <span class="wi"> Width (this is where I want to show the current size) </span>  <button class="BiggerWidth"> + </button></br>
<button class="SmallerHeight"> - </button> <span class="he"> Height (this is where I want to show the current size) </span>  <button class="BiggerHeight"> + </button>

＆＃13;

＆＃13;

＆＃13;

您更新的Fiddle

Answer 3

如果您想知道元素的当前宽度和高度，可以使用width（）和height（）函数：

var width = $('#div1').width(); 
var height= $('#div1').height(); 

Answer 4

请参阅此fiddle

   $(".SmallerWidth").click(function(){
    $("#div1").animate({'width':'-=10px'});
    $("#div2").animate({'width':'-=10px'});
    resize();
});   

$(".BiggerWidth").click(function(){
    $("#div1").animate({'width':'+=10px'});
    $("#div2").animate({'width':'+=10px'});
    resize();
});

$(".SmallerHeight").click(function(){
    $("#div1").animate({'height':'-=10px'});
    $("#div2").animate({'height':'-=10px'});
    resize();
});

$(".BiggerHeight").click(function(){
    $("#div1").animate({'height':'+=10px'});
    $("#div2").animate({'height':'+=10px'});
    resize();
});

function resize(){
   $('#width-total').empty().append("First Width:"+$("#div1").width()+"px Second Width:"+$("#div2").width()+"px");
    $('#height-total').empty().append("First height:"+$("#div1").height()+"px Second height:"+$("#div2").height()+"px");
}

Answer 5

$(".SmallerWidth").click(function(){

    $("#div1").animate({'width':'-=10px'}).html($("#div1").width());
    $("#div2").animate({'width':'-=10px'}).html($("#div2").width());
});   

$(".BiggerWidth").click(function(){


    $("#div1").animate({'width':'+=10px'}).html($("#div1").width());
    $("#div2").animate({'width':'+=10px'}).html($("#div2").width());
});

$(".SmallerHeight").click(function(){
    $("#div1").animate({'height':'-=10px'}).html($("#div1").height());
    $("#div2").animate({'height':'-=10px'}).html($("#div2").height());
});

$(".BiggerHeight").click(function(){

    $("#div1").animate({'height':'+=10px'}).html($("#div1").height());
    $("#div2").animate({'height':'+=10px'}).html($("#div2").height());
});

Answer 6

尝试使用height（）和width（）

请参阅此链接

Animate

Width

height