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

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

Ответ 1

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

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

Ответ 2

jQuery путь -

$("#id").width('30%');

Ответ 3

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

$("#id").css("width", "50%");

Ответ 4

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

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

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

obj.style.width = '50%';

Ответ 5

Да, это:

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

document.getElementById('#myid').style.width = '50%';

Ответ 6

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

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

$(elem).prop('width', '100%');
$(elem).prop('height', '100%');

Ответ 7

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>