在JavaScript中设置DIV宽度和高度

问题描述：

我有 div ， id =div_register。我想在JavaScript中动态设置 width 。

I have a div with id="div_register". I want to set its width dynamically in JavaScript.

我使用以下代码：

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

但这行代码无效。

我也尝试使用单位 px ，如下所示，仍然没有运气：

I also tried using the units px like the following, still no luck:

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

和

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

和

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

但这些代码都不适合我。

but none of this code is working for me.

我不知道出了什么问题。

I don't know what's going wrong.

我使用的是Mozilla Firefox。

I am using 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浏览器。为了使其在所有浏览器中都能正常工作，我还建议添加以下内容：

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:

document.getElementById('div_register').setAttribute("style","width:500px");

为了交叉兼容，您仍需要使用该属性。订单也可能很重要。例如，在我的代码中，当使用JavaScript设置样式属性时，我先设置样式属性，然后设置属性：

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:

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

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

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!

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

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

.hide {
    display:none;
}

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

现在，我可以轻松添加和删除一个类属性，一个属性而不是调用多个属性。此外，当您的Web设计人员想要更改宽泛的定义时，他或她不需要在精心维护的JavaScript代码中进行调整。您的JavaScript代码保持不变，但您的应用程序的主题可以轻松自定义。

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.

此技术遵循将您的内容（HTML）与您的行为（JavaScript）分开的规则，以及您的演示文稿（CSS）。

This technique follows the rule of separating your content (HTML) from your behavior (JavaScript), and your presentation (CSS).

在JavaScript中设置DIV宽度和高度

相关推荐