在 JavaScript 中设置 DIV 的宽度和高度答案

【问题标题】：Setting DIV width and height in JavaScript在 JavaScript 中设置 DIV 的宽度和高度
【发布时间】：2012-04-12 06:02:11
【问题描述】：

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

【问题讨论】：

onload 事件发生后是否尝试设置宽度？
您检查了吗，div_register 是您元素的正确 ID？也许也给我们一些 html...style.width="500px"; 应该是对的。
我设置了document.getElementById('div_register').style.display='block'，然后设置了document.getElementById('div_regsiter').style.width='500px';跨度>
对于它的价值，你在函数的第 3 行和第 4 行中的“文档”一词中有拼写错误......这肯定会使其无法正常工作。
使用onclick="show_update_profile()"而不是onclick="javascript:show_update_profile()"

标签： javascript

【解决方案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 文件中。不仅您的代码更易于维护，而且您实际上会与您的网页设计师交朋友！

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) 分开的规则。

【讨论】：

这不会覆盖所有其他样式属性吗？正如对该问题的评论中所述，display: block 也已设置。
使用 style 属性时一次性设置所有内容。在我自己测试和工作代码的示例中，我将display:block;cursor:pointer;cursor:hand 全部放在同一个 setAttribute 调用中。如果你想让你的生活更轻松，请使用像 jQuery 这样的渐进式 JavaScript 库。我在代码中使用原始 JavaScript 的唯一原因是因为它是为了在客户端网站上嵌入代码，因此实际环境会因站点而异，而在野外避免库冲突的最简单方法就是不使用它们。
我添加了另一个使用类属性的示例。该技术遵循将内容 (HTML) 与行为 (JavaScript) 和演示文稿 (CSS) 分开的规则。它还通过给它一个易于使用的 className 来抽象出样式的实际细节。
@jmort：+1。但只是以准确性的名义，Chrome/FireFox/Safari 都支持对相关属性的操作（例如：element.style.height、element.style.width 等）
嗯，我知道在我自己的代码中，为了让它与 IE7 兼容，我必须遵循一些非常具体的步骤，这些步骤是通过非常痛苦的反复试验发现的。可能是 IE7 无法与 setAttribute 一起正常工作...我记不太清了，所以我将把它留给读者练习，并删除有关 chrome/FF 等的部分。我知道代码有效，即使我可能没有正确解释它。 :)

【解决方案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';

【讨论】：

【解决方案3】：

修复代码中的拼写错误（document 在函数的第 3 行和第 4 行拼写错误，并将 onclick 事件处理程序更改为：onclick="show_update_profile()"，你会没事的。@jmort 的建议很好 -只需设置 2 个您在 javascript 中切换的 css 类 - 它会让事情变得更容易。

您还可以查看 element.addEventListener 为您的元素分配事件处理程序。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：

+1 删除“javascript:”。这是 Web 1.0 早已过时的一种过时结构。
那么请将其添加到您的示例中，否则脚本将失败 - 顺便说一句：您知道 Firefox 的 Firebug 插件吗？这对你有很大帮助
实际上我的脚本没有任何问题.........因为我使用了一个弹出框....这是题外话，因为我的脚本一直运行良好，使用javascript：一切正常，可能是它已经过时了，这不是一个错误……问题在于动态更新宽度……jmort的解决方案帮助我解决了问题
当然。我只是想指出，示例中缺少这些部分，这会导致其他问题。所以现在一切都很好

【解决方案6】：

小心span！

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

将span 更改为div。

【讨论】：

这是因为span 默认是一个内联元素，因此不会遵循任何大小设置。将其 CSS 更改为 display: block、display: flex 或 display: inline-block 将使其像 div 一样正常工作（默认为块元素）。
这个问题从来没有提到过 span，也没有任何答案建议使用一个。我根本看不出这个答案有什么帮助。
奇怪，这是一年前的事了，所以也不知道为什么！！ ^_^
并将styles.width 更改为style.width。 :)

【解决方案7】：

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

know more

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

【讨论】：