获取当前div的宽度和高度

Question

I have two div's that can re-size after clicking on the plus or minus buttons. Not the current situation has the words 'Width' and 'Height' displayed in between.

Instead of the words I would like to show the current size. So if I press twice on the plus (making the div 20px's bigger) I want to show that by visually seeing the number grow with 20px's.

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

I've made a Jsfiddle .

Answer 1

Please see the feedle: https://jsfiddle.net/p9x68vnf/2/

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

UPD:

There is what actually you want:

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

Answer 2

You should put text between span or any other tag. And display it's width and height.

 $(".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()); }

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

 <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>

Your updated Fiddle

Answer 3

If you want to know the current width and height of the element, you can use width() and height() functions:

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

Answer 4

See this 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

try to use height() and width()

see this link

Animate

Width

height