我有一个div带id="div_register".我想width在JavaScript中动态设置它.
我使用以下代码:
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>
jmo*_*253 202
您使用的属性可能无法在Firefox,Chrome和其他非IE浏览器中使用.为了使其在所有浏览器中都能正常工作,我还建议添加以下内容:
document.getElementById('div_register').setAttribute("style","width:500px");
对于交叉兼容性,您仍需要使用该属性.订单也可能很重要.例如,在我的代码中,当使用JavaScript设置样式属性时,我先设置样式属性,然后设置属性:
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';
我还想指出,管理样式的一种更简单的方法是使用CSS类选择器并将样式放在外部CSS文件中.您的代码不仅更易于维护,而且您实际上会与您的Web设计师交朋友!
document.getElementById("div_register").setAttribute("class","wide");
.wide {
display:block;
width:500px;
}
.hide {
display:none;
}
.narrow {
display:block;
width:100px;
}
现在,我可以轻松地添加和删除一个类属性,一个属性,而不是调用多个属性.此外,当您的Web设计人员想要更改宽泛的定义时,他或她不需要在精心维护的JavaScript代码中进行调整.您的JavaScript代码保持不变,但您的应用程序主题可以轻松自定义.
此技术遵循将内容(HTML)与行为(JavaScript)和演示文稿(CSS)分离的规则.
Val*_*i69 14
这些是将样式应用于元素的几种方法.尝试下面的任何一个例子:
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';