38

Is it possible to set the height/width of an element in percent using JavaScript or jQuery?

Daniel Vassallo
  • 337,827
  • 72
  • 505
  • 443
Omu
  • 69,856
  • 92
  • 277
  • 407

7 Answers7

58
document.getElementById('header').style.width = '50%';

If you are using Firebug or the Chrome/Safari Developer tools, execute the above in the console, and you'll see the Stack Overflow header shrink by 50%.

Daniel Vassallo
  • 337,827
  • 72
  • 505
  • 443
  • 1
    However, before initializing in this way, the `style.width` property will be null unless there is an inline-style on this element. Use `getComputedStyle()` for all modern browsers, and `currentStyle` for IE5 and below. see: http://stackoverflow.com/questions/3050211/get-value-from-css-using-document-getelementbyid-style-height-javascript/8463292#8463292. Also, jQuery is really the best for handling these browser annoyances. – Ian Campbell Jun 13 '13 at 03:17
32

jQuery way - 

$("#id").width('30%');
N 1.1
  • 12,418
  • 6
  • 43
  • 61
11

I always do it like this:

$("#id").css("width", "50%");
js1568
  • 7,012
  • 2
  • 27
  • 47
Dalius I
  • 943
  • 11
  • 6
5

The question is what do you want the div's height/width to be a percent of?

By default, if you assign a percentage value to a height/width it will be relative to it's direct parent dimensions. If the parent doesn't have a defined height, then it won't work.

So simply, remember to set the height of the parent, then a percentage height will work via the css attribute:

obj.style.width = '50%';
Nick Meldrum
  • 1,141
  • 1
  • 10
  • 27
3

Yes, it is:

<div id="myid">Some Content........</div>

document.getElementById('myid').style.width = '50%';
76484
  • 8,498
  • 3
  • 19
  • 30
Sarfraz
  • 377,238
  • 77
  • 533
  • 578
2

Also you can use .prop() and it should be better because

Since jQuery 1.6, these properties can no longer be set with the .attr() method. They do not have corresponding attributes and are only properties.

$(elem).prop('width', '100%');
$(elem).prop('height', '100%');
revoke
  • 529
  • 4
  • 9
0

testjs2 

    $(document).ready(function() { 
      $("#form1").validate({ 
        rules: { 
          name: "required", //simple rule, converted to {required:true} 
          email: { //compound rule 
          required: true, 
          email: true 
        }, 
        url: { 
          url: true 
        }, 
        comment: { 
          required: true 
        } 
        }, 
        messages: { 
          comment: "Please enter a comment." 
        } 
      }); 
    }); 

    function()
    {
    var ok=confirm('Click "OK" to go to yahoo, "CANCEL" to go to hotmail')
    if (ok)
    location="http://www.yahoo.com"
    else
    location="http://www.hotmail.com"
    }

    function changeWidth(){
    var e1 = document.getElementById("e1");
    e1.style.width = 400;
} 

  </script> 

  <style type="text/css"> 
    * { font-family: Verdana; font-size: 11px; line-height: 14px; } 
    .submit { margin-left: 125px; margin-top: 10px;} 
    .label { display: block; float: left; width: 120px; text-align: right; margin-right: 5px; } 
    .form-row { padding: 5px 0; clear: both; width: 700px; } 
    .label.error { width: 250px; display: block; float: left; color: red; padding-left: 10px; } 
    .input[type=text], textarea { width: 250px; float: left; } 
    .textarea { height: 50px; } 
  </style> 

  </head> 
  <body> 

    <form id="form1" method="post" action=""> 
      <div class="form-row"><span class="label">Name *</span><input type="text" name="name" /></div> 
      <div class="form-row"><span class="label">E-Mail *</span><input type="text" name="email" /></div> 
      <div class="form-row"><span class="label">URL </span><input type="text" name="url" /></div> 
      <div class="form-row"><span class="label">Your comment *</span><textarea name="comment" ></textarea></div> 
      <div class="form-row"><input class="submit" type="submit" value="Submit"></div> 
      <input type="button" value="change width" onclick="changeWidth()"/>
      <div id="e1" style="width:20px;height:20px; background-color:#096"></div>
    </form> 



  </body> 
</html>
premji
  • 1