Как установить ширину деления в процентах в JavaScript? - PullRequest
Новая
       15

Как установить ширину деления в процентах в JavaScript?

28 голосов
/ 17 марта 2010

Можно ли установить высоту / ширину элемента в процентах, используя JavaScript или jQuery?

Ответы [ 7 ]

42 голосов
/ 17 марта 2010 
document.getElementById('header').style.width = '50%';

Если вы используете Firebug или инструменты Chrome / Safari Developer, выполните приведенное выше в консоли, и вы увидите, что заголовок переполнения стека уменьшится на 50%.

33 голосов
/ 17 марта 2010

jQuery way - 

$("#id").width('30%');
9 голосов
/ 15 декабря 2011

Я всегда так делаю: 

$("#id").css("width", "50%");
3 голосов
/ 17 марта 2010

Вопрос в том, что вы хотите, чтобы высота / ширина div была в процентах?

По умолчанию, если вы назначите процентное значение для высоты / ширины, оно будет относиться к его прямым родительским измерениям. Если родитель не имеет определенной высоты, он не будет работать.

Итак, не забудьте установить высоту родительского элемента, тогда процентная высота будет работать через атрибут css: 

obj.style.width = '50%';
2 голосов
/ 17 марта 2010

Да, это: 

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

document.getElementById('#myid').style.width = '50%';
1 голос
/ 21 ноября 2017

Также вы можете использовать .prop () , и это должно быть лучше, потому что

Начиная с jQuery 1.6, эти свойства больше нельзя устанавливать с помощью метода .attr (). Они не имеют соответствующих атрибутов и являются только свойствами. 

$(elem).prop('width', '100%');
$(elem).prop('height', '100%');
0 голосов
/ 15 апреля 2016

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...