javascriptjqueryhtmlcss

How to change the dimensions of a div depending of a number extern to that div?

I want to change the dimensions of a div depending of which number is contained in another div. For example if I have the number 0 the div has to be width: 20px; height 0px;, if I have the number 50 the div has to be width: 20px; height 50px;, if I have the number 100 the div has to be width: 20px; height 100px;.

How can I do it in CSS or jQuery?

Solution

  • Use css() function :

    $('#div-2').css("height", $('#div-1').text()+'px');
    #div-2{
   background-color: green;
   width: 20px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div-1'>50</div>
<div id='div-2'></div>

    Hope this helps.