如何在 JavaScript 中以百分比设置 div 的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2460662/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set width of a div in percent in JavaScript?
提问by Omu
Is it possible to set the height/width of an element in percent using JavaScript or jQuery?
是否可以使用 JavaScript 或 jQuery 以百分比形式设置元素的高度/宽度？
回答by Daniel Vassallo
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%.
如果您使用的是 Firebug 或 Chrome/Safari 开发者工具，请在控制台中执行上述操作，您将看到 Stack Overflow 标头缩小了 50%。
回答by N 1.1
jQuery way -
jQuery 方式 -
$("#id").width('30%');
回答by Dalius I
I always do it like this:
我总是这样做：
$("#id").css("width", "50%");
回答by Nick Meldrum
The question is what do you want the div's height/width to be a percent of?
问题是你希望 div 的高度/宽度是多少？
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:
所以简单地说，记住设置父级的高度，然后百分比高度将通过 css 属性起作用：
obj.style.width = '50%';
回答by Sarfraz
Yes, it is:
是的：
<div id="myid">Some Content........</div>
document.getElementById('#myid').style.width = '50%';
回答by revoke
Also you can use .prop()and it should be better because
你也可以使用.prop()，它应该更好，因为
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.
从 jQuery 1.6 开始，这些属性不能再使用 .attr() 方法设置。它们没有相应的属性，只是属性。
$(elem).prop('width', '100%');
$(elem).prop('height', '100%');
回答by premji
testjs2
测试js2
$(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>
