Question

我创建了HTML INPUT元素，其类型为＆＃34; RANGE＆＃34;并且id =＆＃34; slider＆＃34;。为什么我不能使用getAttribute（＆＃34; value＆＃34;）方法访问它的值？调试器显示有一个名为＆＃34; value＆＃34;的属性。有些值不等于元素的值。范围元素的值不应该是它的属性吗？

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

Answer 1

为什么我无法使用getAttribute（“value”）方法访问其值？

你不能这样做因为，.getAttribute("value")将元素写入的值返回到html中（如果不改变它，则为默认值）。

示例：

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

如果您使用输入来更改范围，

document.getElementById("slider").getAttribute("value");也会返回500。

调试器显示有一个名为“value”的属性，其中某些值不等于该元素的值。

这是真的，对。如果设置了默认值，它永远不会改变（对于重置输入很有用）。

范围元素的值不应该是它的属性吗？

不，元素的当前值存储在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"/>

Answer 2

关于互联网上输入类型= RANGE的文档很少......

ie9和更旧的浏览器不支持它，因为它是一个较新的HTML5元素。

这是Demo on how it works

这是我使用的代码。

HTML

<p>Minimum =0, Maximum = 100, Step = 5</p>
<input id="slider" type="range" min="0" max="100" step="5" onchange="printValue('slider','rangeValue')">
<input id="rangeValue" type="text" size="5" />

JS

function printValue(sliderID,TextBoxID){    document.getElementById(TextBoxID).value=document.getElementById(sliderID).value;
}

HTML输入范围的值，getattribute vs value

2 个答案: