发表新帖
发表新帖

How to set width of a div in percent in JavaScript?

后端 未结
关注
7 905
我寻月下人不归
我寻月下人不归 2020-12-09 08:09

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

相关标签:
7条回答
  • 青春惊慌失措
    2020-12-09 08:40

    I always do it like this:

    $("#id").css("width", "50%");
    0 讨论(0)
  • 予麋鹿
    2020-12-09 08:42

    jQuery way - 

    $("#id").width('30%');
    0 讨论(0)
  • 忘掉有多难
    2020-12-09 08:49

    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>
    0 讨论(0)
  • 天命终不由人
    2020-12-09 08:51

    Yes, it is:

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

document.getElementById('#myid').style.width = '50%';
    0 讨论(0)
  • 春和景丽
    2020-12-09 08:52

    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%');
    0 讨论(0)
  • 小蘑菇
    2020-12-09 08:56 
    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%.

    0 讨论(0)
 看不清?
提交回复
热议问题