在 JavaScript 中设置 DIV 的宽度和高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10118172/
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
Setting DIV width and height in JavaScript
提问by Saswat
I have a divwith id="div_register". I want to set its widthdynamically in JavaScript.
我有一个div带id="div_register"。我想width在 JavaScript 中动态设置它。
I am using this following code:
我正在使用以下代码：
getElementById('div_register').style.width=500;
but this line of code isn't working.
但这行代码不起作用。
I also tried using the units pxlike the following, still no luck:
我也尝试使用如下单位px，但仍然没有运气：
getElementById('div_register').style.width='500px';
and
和
getElementById('div_register').style.width='500';
and
和
getElementById('div_register').style.width=500px;
but none of this code is working for me.
但这些代码都不适合我。
I don't know what's going wrong.
我不知道出了什么问题。
I am using Mozilla Firefox.
我正在使用 Mozilla Firefox。
EDIT
编辑
<html>
<head>
<title>Untitled</title>
<script>
function show_update_profile() {
document.getElementById('black_fade').style.display='block';
//document.getElementById.('div_register').style.left=((window.innerWidth)-500)/20;
document.getElementById('div_register').style.height= "500px";
document.getElementById('div_register').style.width= '500px';
//alert('kutta');
document.getElementById('div_register').style.display='block';
document.getElementById('register_flag').value= 1;
document.getElementById('physical_flag').value= 0;
document.getElementById('cultural_flag').value= 0;
document.getElementById('professional_flag').value= 0;
document.getElementById('lifestyle_flag').value= 0;
document.getElementById('hobby_flag').value= 0;
//alert(window.innerWidth);
}
</script>
<style>
.white_content {
display:none;
}
</style>
</head>
<body>
<div id="main">
<input type="button" onclick="javascript:show_update_profile();" id="show" name="show" value="show"/>
</div>
<div id="div_register">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
welcome
</td>
</tr>
</table>
</div>
</body>
</html>
回答by jmort253
The properties you're using may not work in Firefox, Chrome, and other non-IE browsers. To make this work in all browsers, I also suggest adding the following:
您使用的属性可能无法在 Firefox、Chrome 和其他非 IE 浏览器中使用。为了在所有浏览器中都能正常工作，我还建议添加以下内容：
document.getElementById('div_register').setAttribute("style","width:500px");
For cross-compatibility, you will still need to use the property. Order may also matter. For instance, in my code, when setting style properties with JavaScript, I set the style attribute first, then I set the properties:
对于交叉兼容性，您仍然需要使用该属性。顺序也可能很重要。例如，在我的代码中，使用 JavaScript 设置样式属性时，我先设置样式属性，然后设置属性：
document.getElementById("mydiv").setAttribute("style","display:block;cursor:pointer;cursor:hand;");
document.getElementById("mydiv").style.display = "block";
document.getElementById("mydiv").style.cursor = "hand";
Thus, the most cross-browser compatible example for you would be:
因此，最适合您的跨浏览器兼容示例是：
document.getElementById('div_register').setAttribute("style","display:block;width:500px");
document.getElementById('div_register').style.width='500px';
I also want to point out that a much easier method of managing styles is to use a CSS class selector and put your styles in external CSS files. Not only will your code be much more maintainable, but you'll actually make friends with your Web designers!
我还想指出，管理样式的一种更简单的方法是使用 CSS 类选择器并将您的样式放在外部 CSS 文件中。不仅您的代码更易于维护，而且您实际上会与您的 Web 设计师交朋友！
document.getElementById("div_register").setAttribute("class","wide");
.wide {
display:block;
width:500px;
}
.hide {
display:none;
}
.narrow {
display:block;
width:100px;
}
Now, I can easily just add and remove a class attribute, one single property, instead of calling multiple properties. In addition, when your Web designer wants to change the definition of what it means to be wide, he or she does not need to go poking around in your beautifully maintained JavaScript code. Your JavaScript code remains untouched, yet the theme of your application can be easily customized.
现在，我可以轻松地添加和删除一个类属性，一个属性，而不是调用多个属性。此外，当您的 Web 设计师想要更改“宽”的定义时，他或她不需要在您维护精美的 JavaScript 代码中四处寻找。您的 JavaScript 代码保持不变，但您的应用程序主题可以轻松定制。
This technique follows the rule of separating your content (HTML) from your behavior (JavaScript), and your presentation (CSS).
此技术遵循将内容 (HTML) 与行为 (JavaScript) 和演示文稿 (CSS) 分离的规则。
回答by Valli69
These are several ways to apply style to an element. Try any one of the examples below:
这些是将样式应用于元素的几种方法。尝试以下任一示例：
1. document.getElementById('div_register').className = 'wide';
/* CSS */ .wide{width:500px;}
2. document.getElementById('div_register').setAttribute('class','wide');
3. document.getElementById('div_register').style.width = '500px';
回答by Daniel Szabo
Fix the typos in your code ("document" is spelled wrong on lines 3 & 4 of your function, and change the onclick event handler to read: onclick="show_update_profile()" and then you'll be fine. You should really follow jmort's advice and simply set up 2 css classes that you switch between in javascript -- it would make your life a lot easier and save yourself from all the extra typing. The typos you've committed are a perfect example of why this is the better approach.
修复代码中的拼写错误（“document”在函数的第 3 行和第 4 行拼写错误，并将 onclick 事件处理程序更改为：onclick="show_update_profile()" 然后你会没事的。你应该真正遵循jmort 的建议并简单地设置您在 javascript 中切换的 2 个 css 类——这将使您的生活更轻松，并使您免于所有额外的打字。您所犯的错别字是为什么这是更好的一个完美例子方法。
For brownie points, you should also check out element.addEventListenerfor assigning event handlers to your elements.
对于布朗尼点数，您还应该查看element.addEventListener以将事件处理程序分配给您的元素。
回答by Andy B
Be careful of span!
小心span！
myspan.styles.width='100px'doesn't want to work.
myspan.styles.width='100px'不想工作。
Change the spanto a div.
将 更改span为div。
回答by powerMicha
If you remove the javascript:prefix and remove the parts for the unknown ids like 'black_fade'from your javascript code, this should work in firefox
如果您删除javascript:前缀并'black_fade'从您的 javascript 代码中删除未知 id 的部分，这应该在 firefox 中工作
Condensed example:
精简示例：
<html>
<head>
<script type="text/javascript">
function show_update_profile() {
document.getElementById('div_register').style.height= "500px";
document.getElementById('div_register').style.width= "500px";
document.getElementById('div_register').style.display='block';
return true;
}
</script>
<style>
/* just to show dimensions of div */
#div_register
{
background-color: #cfc;
}
</style>
</head>
<body>
<div id="main">
<input type="button" onclick="show_update_profile();" value="show"/>
</div>
<div id="div_register">
<table>
<tr>
<td>
welcome
</td>
</tr>
</table>
</div>
</body>
</html>
回答by jpsimons
The onclickattribute of a button takes a string of JavaScript, not an href like you provided. Just remove the "javascript:" part.
onclick按钮的属性采用 JavaScript 字符串，而不是您提供的 href。只需删除“javascript：”部分。
