在 JavaScript 中设置 DIV 宽度和高度

我有一个带 id="div_register"的 div，我想用 JavaScript 动态设置它的 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>
461569 次浏览
小开
最佳答案

你使用的属性可能不适用于 Firefox，Chrome 和其他非 IE 浏览器。为了在所有浏览器中都能使用，我还建议添加以下内容:

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';

我还想指出，管理样式的一个更简单的方法是使用 CSS 类选择器，并将样式放在外部 CSS 文件中。您的代码不仅更易于维护，而且您实际上将与 Web 设计人员成为朋友！

document.getElementById("div_register").setAttribute("class","wide");


.wide {
display:block;
width:500px;
}


.hide {
display:none;
}


.narrow {
display:block;
width:100px;
}

现在，我可以轻松地添加和删除一个 class 属性，一个属性，而不是调用多个属性。此外，当您的 Web 设计师想要更改宽度的定义时，他或她不需要到处查看您维护良好的 JavaScript 代码。JavaScript 代码保持不变，但应用程序的主题可以轻松定制。

此技术遵循将内容(HTML)与行为(JavaScript)和表示(CSS)分离的规则。

小开

按钮的 onclick属性接受一个 JavaScript 字符串，而不是您提供的 href。只要删除“ javascript:”部分。

小开

如果从 javascript 代码中删除 javascript:前缀并删除未知 id (如 'black_fade')的部分，那么这应该可以在 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>
小开

修复代码中的错误(函数的第3行和第4行中的 document拼写错误，将 onclick 事件处理程序改为: onclick="show_update_profile()"就可以了。@ jmort 的建议很好——只需要在 javascript 中设置两个 css 类就可以了——这会让事情变得更简单。

还可以借助 AddEventListener为元素分配事件处理程序。

小开

下面是几种对元素应用样式的方法，请尝试下面的任何一个例子:

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';
小开

小心 span！

myspan.styles.width='100px'不想工作。

将 span改为 div。

小开

你必须使用 文件。文档界面代表浏览器中加载的任何网页，并作为进入网页内容的入口点,

了解更多

document.getElementById('div_register').style.width='500px';

提交答案