javascript - 创建带有动态背景图像的按钮

标签 javascript html css

我正在使用 JavaScript 动态创建按钮;我希望每个按钮都有自己的背景图像。我怎样才能实现这个目标?

到目前为止我的代码是:

<html>

<body>
    <script>
        function buttonsCreate() {
            for (var i = 0; i <= 10; ++i) {
                var button = document.createElement("button");
                var Area = document.getElementById("Area");
                Area.appendChild(button);
                button.setAttribute("onClick", "eventHandlerForButtons('" + i + "');");
            }
        }

        function eventHandlerForButtons(alertText) {
            alert(alertText);
        }
    </script>
    <button onClick="buttonsCreate();">Create Buttons</button>
    <div id="Area"></div>
</body>

</html>

最佳答案

在 for 循环中尝试 button.style.backgroundImage = "url("+ array[i] + ")"; 。将 array 替换为您自己的数组变量。

另外,变量名称和元素 ID 请勿以大写字母开头,例如区域 -> 区域

您可以将 var Area = document.getElementById("Area"); 移至 for 循环之外。这不需要调用 10 次。

关于javascript - 创建带有动态背景图像的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42503215/

相关文章:

html - 如何在html5中 float 部分标签

html - 如何让 CSS 缩放元素不影响页面滚动条?

CSS Sprites 图像在 IE 中渲染质量不佳

php - 如何根据初始页面上的选择加载自定义样式表?

javascript - this.model 不是函数

javascript - Jasmine spy() 用于 postMessage 事件失败

html - 如何将 Logo 与 Logo 下方的相应文本水平对齐?

javascript - IIS url 重写 - css 和 js 被错误地重写

javascript - 具有不同宽度的两列 Masonry jQuery?

javascript - 根据选择隐藏文本区域 - Jquery