如何在JavaScript中以百分比设置div的宽度？
[英]How to set width of a div in percent in JavaScript?
问题描述
是否可以使用JavaScript或jQuery以百分比设置元素的高度/宽度？
7 个解决方案
解决方案1
44 已采纳 2010-03-17 08:12:37
document.getElementById('header').style.width = '50%';
如果您使用的是Firebug或Chrome / Safari Developer工具，请在控制台中执行上述操作，然后您会看到Stack Overflow标头缩小了50％。
解决方案2
33 2010-03-17 08:14:04
jQuery方式-
$("#id").width('30%');
解决方案3
9 2011-12-15 15:53:55
我总是这样做：
$("#id").css("width", "50%");
解决方案4
4 2010-03-17 09:05:09
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%';
解决方案5
2 2010-03-17 08:11:47
Yes, it is: 是的：
<div id="myid">Some Content........</div>
document.getElementById('#myid').style.width = '50%';
解决方案6
1 2017-11-21 12:32:38
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.
$(elem).prop('width', '100%');
$(elem).prop('height', '100%');
解决方案7
0 2016-04-15 07:08:56
testjs2 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.