Question

我有div id="div_register"。我想在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>

Answer 1

您使用的属性可能无法在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）分开的规则。

Answer 2

这些是将样式应用于元素的几种方法。请尝试以下任何一个示例：

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

Answer 3

修复代码中的拼写错误（“文档”在函数的第3行和第4行拼写错误，并将onclick事件处理程序更改为：onclick =“show_update_profile（）”然后你就可以了。你应该真正遵循jmort的建议，只需设置2个css类，你可以在javascript中切换它 - 它会让你的生活变得更轻松，并且可以避免所有额外打字。你犯下的错别字是一个完美的例子。这是更好的方法。

对于布朗尼点，您还应该检查element.addEventListener是否为您的元素分配事件处理程序。

Answer 4

如果您删除了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>

Answer 5

小心span！

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

将span更改为div。

Answer 6

按钮的onclick属性需要一串JavaScript，而不是您提供的href。只需删除“javascript：”部分。

Answer 7

您必须使用文档。 Document 接口代表浏览器中加载的任何网页，并作为网页内容的入口点，

know more

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

在JavaScript中设置DIV宽度和高度

7 个答案: