HTML5 通过 JavaScript 动态创建范围

HTML5 Range dynamic creation via javascript

本文关键字：创建 范围 动态 JavaScript 通过 HTML5      更新时间：2023-09-26

我正在尝试创建动态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);

滑块出现，但不是好方法。在镶边上，只显示光标而不是整个滑块，我无法移动它。在检查器上，元素存在并且正常。

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

在火狐上，它只是没有出现。

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

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

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

谢谢:)

您的代码在 chrome 中工作正常。请考虑以下示例：
http://jsfiddle.net/webdevel/Qmvam/

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

Firefox 还不支持它。

相关文章：