javascript - 如何更改 div 的颜色和宽度?

标签 javascript html css

我希望 for a div 通过两个数组和在 for 循环中指定不同的颜色和宽度,但我找不到如何完成此操作。所以我有 5 个 div,它们都应该有不同的颜色和单独的宽度。

这里有人有这方面的经验并且可以帮助我吗?谢谢。

    <html>
    <head>
        <title>Hoi</title>
    <script type="text/javascript">

        var color = Array("#F00","#FF0","#0F0","#0FF","#00F");
        var width = Array("20", "40", "60", "80", "100");

        {
            for (i=0; i<5; i++)
            {
                document.getElementById('div'+i).style.backgroundColor = color[i];
                document.getElementById('div'+i).style.width = width[i];
            }
        }

        </script>
    </head>
    <body>
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div id="div3">div3</div>
        <div id="div4">div4</div>
        <div id="div5">div5</div>
    </body>
</html>

最佳答案

将 for 循环更改为:

for (i=0; i<5; i++) {
  document.getElementById('div'+i).style.backgroundColor = color[i];
  document.getElementById('div'+i).style.width = width[i];

for (i=1; i <= 5; i++) {
    document.getElementById('div'+i).style.backgroundColor = color[i-1];
    document.getElementById('div'+i).style.width = width[i-1] + "px";

和 更改:

document.getElementById('div'+i).style.width = width[i];

document.getElementById('div'+i).style.width = width[i-1] + "px";

并在 body 标记关闭之前添加 js 代码 演示::jsFiddle

关于javascript - 如何更改 div 的颜色和宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21231243/

相关文章:

javascript - 带有 Dart 的谷歌地图 : retain function is not defined

css - 如何定位直接位于另一个 div 之后的 div,并且它们都在同一个父 div 中?

javascript - 类变量在元素事件内不可见?

javascript - 双重提交表单会产生验证问题

html - 如何在一行中显示<li> </li>元素

javascript - 强制用户到页面顶部?

jquery - 我如何让 wapper 扩展?

css - 如何在辅助轴上设置 flex-basis

可以创建详细的类 CSS 反射的 Javascript 库 :

java - GWT:如果未登录应用程序,静态 HTML 页面应重定向到 login.html