1

我正在尝试创建动态 HTML5 范围输入 来控制游戏中的音量。

这个想法是把它放在我的画布上。

这是代码的样子：

    var slider = document.createElement('input');
    slider.id = "volume";
    slider.type = 'range';
    slider.min = 0;
    slider.max = 1;
    slider.value = 0.5;
    slider.step = 0.1;
    document.body.appendChild(slider);

滑块出现，但不是好方法。在 chrome 上，只出现光标而不是整个滑块，我无法移动它。在检查器上，元素存在并且没问题。

    <input id="volume" type="range" min="0" max="1" step="0.1"> on chrome

在Firefox上，它只是没有出现。

<input id="volume" type="range"> on firefox

所以我只是想知道为什么我的滑块没有正确显示。有什么我做错了吗？

PS：我已经尝试过修改节点顺序或 zIndex 之类的东西。

谢谢 ：）

4

1 回答 1

1

您的代码在 chrome 中正常工作。考虑这个例子：http:
//jsfiddle.net/webdevel/Qmvam/

如果您在 DOM 准备好之前尝试动态创建元素，则可能会发生这种情况。

Firefox 还不支持它。

于 2012-04-09T10:03:32.810 回答