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

あなたのコードはクロムで正しく動作します。この例を考えてみましょう:
http://jsfiddle.net/webdevel/Qmvam/

DOM の準備が整う前に要素を動的に作成しようとすると、発生する可能性があります。

Firefox はまだサポートしていません。

于 2012-04-09T10:03:32.810 に答える