2

type="RANGE" と id="slider" で HTML INPUT 要素を作成しました。getAttribute("value") メソッドを使用してその値にアクセスできないのはなぜですか? デバッガーは、要素の値と等しくない値を持つ「値」という名前の属性があることを示しています。range 要素の値をその属性にするべきではありませんか?

var sliderValue1=document.getElementById("slider").getAttribute("value");
var sliderValue2= document.getElementById("slider").value;
4

2 に答える 2

5

getAttribute("value") メソッドを使用してその値にアクセスできないのはなぜですか?

要素 write の値を html に返すため、これを行うことはできません.getAttribute("value")(変更しない場合はデフォルト値)。

例：

と：<input type="range" id="slider" value="500">

document.getElementById("slider").getAttribute("value");500入力を使用して範囲を変更した場合にも返されます。

デバッガーは、要素の値と等しくない値を持つ「値」という名前の属性があることを示しています。

それは本当です、そして正しいです。デフォルト値を設定すると、変更されません (入力をリセットするのに便利です)。

range 要素の値をその属性にするべきではありませんか?

いいえ、要素の現在の値は html の外に格納されているため、現在の値にアクセスするには: を使用する必要がありますdocument.getElementById("slider").value;が、範囲だけでなくすべてのタイプの入力で同じです。

$(function(){
    $("input[name=foo]").on("change",function(){
        var val = $(this).val();
        var attr = $(this).attr("value");
        var prop = $(this).prop("value");
        console.log(" --- JQUERY TEST JS ----");
        console.log("Current value: (using .val)",val);
        console.log("Initial value: (using .attr)",attr);
        console.log("Current value: (using .prop)",prop);
    });
});

//NATIVE JS
function originalJS(){
    console.log(" --- ORIGINAL JS ----");
    console.log("Current value: (using .value)",this.value);
    console.log("Initial value: (using .attr)",this.getAttribute("value"));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="range" onChange="originalJS.call(this)" name="foo" value="500"/>
<p>RUN AND WATCH CONSOLE :) ... watch value="500" (but range is 0-100)</p>

<input type="text" onChange="originalJS.call(this)" name="foo" value="500"/>

于 2014-11-19T10:20:35.777 に答える