在JavaScript中设置DIV宽度和高度

108

我有一个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>

javascript

— 萨斯瓦特
source

onload事件发生后，您是否尝试过设置宽度？

— Cyclonecode

1

您是否检查过，那div_register是您元素的正确ID？也许也给我们一些html ...style.width="500px";应该是正确的。

— powerMicha

我已经设置了document.getElementById（'div_register'）。style.display ='block'，然后设置了document.getElementById（'div_regsiter'）。style.width ='500px';

— 萨斯瓦特2012年

1

对于它的价值，您在函数的第3行和第4行的“文档”一词中有错别字……这肯定会使它无法正常工作。

— Daniel Szabo

1

用 onclick="show_update_profile()"代替onclick="javascript:show_update_profile()"

— Tejasva Dhyani

227

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

— 第253节
source

1

这不会覆盖所有其他样式属性吗？正如对该问题的评论中所提到的，display: block也已确定。

— powerMicha 2012年

2

使用style属性时，请立即设置所有内容。在我自己的经过测试和工作的代码示例中，我将display:block;cursor:pointer;cursor:hand所有内容放入同一setAttribute调用中。如果您希望生活更轻松，请使用jQuery之类的渐进式JavaScript库。我在代码中使用原始JavaScript的唯一原因是因为它是在客户端网站上嵌入代码，因此实际环境因站点而异，而避免野外库冲突的最简单方法就是不使用它们。

— jmort253

1

我添加了另一个使用类属性的示例。该技术遵循将内容（HTML）与行为（JavaScript）和演示文稿（CSS）分开的规则。它还通过给它一个易于使用的className来抽象出样式的实际细节。

— jmort253

@jmort：+1。但是以准确性为名，Chrome / FireFox / Safari均支持对有问题的属性进行操作（例如：element.style.height，element.style.width等）

— Daniel Szabo 2012年

嗯，我知道在我自己的代码中，要使其与IE7配合使用，我必须遵循一些非常具体的步骤，这些步骤是通过非常痛苦的反复试验发现的。可能是IE7无法与setAttribute一起正常使用...我不记得确切了，所以我将其留给读者作为练习，并将删除有关chrome / FF等的部分。我知道代码即使我可能无法正确解释它也能正常工作。:)

— jmort253

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

— 瓦利69
source

1

修复代码中的拼写错误（函数的第3行和第4行的“文档”拼写错误，然后将onclick事件处理程序更改为：onclick =“ show_update_profile（）”，然后就可以了。您应该真正遵循jmort的建议，并简单地设置了2个CSS类，您可以在javascript中进行切换-这样可以使您的生活更加轻松，并避免进行额外的输入操作。您输入的错别字就是一个很好的例子，说明了为什么这样做会更好方法。

对于布朗尼点，您还应该签出element.addEventListener以便为元素分配事件处理程序。

— 丹尼尔·萨博（Daniel Szabo）
source

0

如果您从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>

— powerMicha
source

删除“ javascript：”时+1。这是Web 1.0长期以来的过时结构。

— jmort253

然后将其添加到您的示例中，否则脚本将失败-顺便说一句：您知道FirebugFirefox插件吗？这将对您有很大帮助

— powerMicha

实际上，我的脚本中没有错.....因为我使用的是弹出框....那是不合时宜的，因为我的脚本一直以来都使用javascript正常运行：效果很好，可能是其过时的bt，这不是一个错误...问题在于动态更新宽度...而jmort的解决方案帮助我得出了解决方案

— Saswat 2012年

当然。我只想指出，示例中缺少这些部分，这导致了其他问题。所以现在一切都很好

— powerMicha

-1

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

— psi
source

-1

小心点span！

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

将更span改为div。

— 安迪·B
source

1

这是因为span默认情况下是一个内联元素，因此不会遵守任何设置的大小设置。将其CSS更改为display: block，display: flex或display: inline-block会使其正常工作，就像div（默认为block元素）一样。

— 丹尼尔T.16年

2

这个问题从未提到跨度，也没有建议使用任何一个答案。我完全看不出这个答案有什么帮助。

— 文斯·鲍德伦

1

很奇怪，这是一年前的事，所以不确定为什么！^ _ ^

— Andy B

1

并更改styles.width为style.width。:)

— RiZKiT