在JavaScript中设置DIV的宽度和高度
我有一个id="div_register"
的div
。 我想在JavaScript中dynamic设置它的width
。
我正在使用下面的代码:
getElementById('div_register').style.width=500;
但是这行代码不起作用。
我也尝试使用像下面的单位px
,仍然没有运气:
getElementById('div_register').style.width='500px';
和
getElementById('div_register').style.width='500';
和
getElementById('div_register').style.width=500px;
但是这些代码都没有为我工作。
我不知道怎么回事
我正在使用Mozilla Firefox。
编辑
<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>
您使用的属性可能无法在Firefox,Chrome和其他非IE浏览器中使用。 为了使这个工作在所有浏览器中,我还build议添加以下内容:
document.getElementById('div_register').setAttribute("style","width:500px");
为了交叉兼容性,您仍然需要使用该属性。 订单也可能很重要。 例如,在我的代码中,当使用JavaScript设置样式属性时,我首先设置了style属性,然后设置属性:
document.getElementById("mydiv").setAttribute("style","display:block;cursor:pointer;cursor:hand;"); document.getElementById("mydiv").style.display = "block"; document.getElementById("mydiv").style.cursor = "hand";
因此,最适合你的跨浏览器兼容的例子是:
document.getElementById('div_register').setAttribute("style","display:block;width:500px"); document.getElementById('div_register').style.width='500px';
我还想指出,pipe理样式的一个更简单的方法是使用CSS类select器并将样式放在外部CSS文件中。 您的代码不仅会更易于维护,而且还会与您的网页devise师真正交朋友!
document.getElementById("div_register").setAttribute("class","wide"); .wide { display:block; width:500px; } .hide { display:none; } .narrow { display:block; width:100px; }
现在,我可以轻松地添加和删除一个类属性,一个单一的属性,而不是调用多个属性。 另外,当您的网页devise师想要改变广义的定义时,他或她不需要在维护良好的JavaScript代码中进行探索。 您的JavaScript代码保持不变,但应用程序的主题可以轻松定制。
此技术遵循将您的内容(HTML)与您的行为(JavaScript)和您的演示文稿(CSS)分开的规则。
这些是几种将元素应用于样式的方法。 尝试下面的任何一个例子:
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';
修正你的代码中的拼写错误(“文档”在你的函数的第3和第4行拼写错误,并改变onclick事件处理程序读取:onclick =“show_update_profile()”,那么你会没事的。 jmort的build议,并简单地设置了2个CSS类,你可以在JavaScript之间切换 – 这将使你的生活变得容易很多,并免除所有额外的input。你所犯的错别字是一个完美的例子,为什么这是更好的做法。
对于布朗尼点,您还应该查看element.addEventListener,以将事件处理程序分配给您的元素。
如果你删除javascript:
前缀,并从你的javascript代码中删除像'black_fade'
这样的未知id的部分,这应该在firefox
简明例子:
<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>
小心span
!
myspan.styles.width='100px'
不想工作。
将span
更改为div
。
button的onclick
属性需要一串JavaScript,而不是像你提供的那样。 只要删除“javascript:”部分。
- 为什么document.body.offsetHeight + document.body.bottomMargin不等于document.documentElement.offsetHeight
- AngularJS:如何做一个jsonp请求
- 什么是按位运算符?
- 如何将这个元素传递给JavaScript的onclick函数,并添加一个类到单击的元素
- 未能在“DOMWindow”上执行“postMessage”:https://www.youtube.com!== http:// localhost:9000
- 你如何sorting在多列上的数组?
- 如何最好地使链接提交表单
- 从用户代理或Javascript中检测64位或32位Windows?
- 在SELECT中的AngularJs – ng-model