2

我创建了 type="RANGE" 和 id="slider" 的 HTML INPUT 元素。为什么我不能使用 getAttribute("value") 方法访问它的值？调试器显示有一个名为“value”的属性，其值不等于元素的值。范围元素的值不应该是它的属性吗？

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

2 回答 2

5

为什么我不能使用 getAttribute("value") 方法访问它的值？

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

例子：

和：<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"/>

于 2014-11-19T10:20:35.777 回答
0

互联网上关于 Input Type=RANGE 的文档很少......

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

这是一个关于它如何工作的演示

这是我使用的代码。

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;
}
于 2014-11-19T10:12:53.930 回答