HTML输入范围的值，getattribute vs value

Posted 2023-03-05

【中文标题】HTML输入范围的值，getattribute vs value

【英文标题】：Value of HTML input range, getattribute vs value

【发布时间】：2015-01-16 18:45:36

【问题描述】：

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

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

【参考方案1】：

互联网上关于 Input Type=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;

【参考方案2】：

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

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

例子：

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

document.getElementById("slider").getAttribute("value"); return 500 如果你使用输入来改变范围。

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

这是真的，而且是正确的。如果你设置一个默认值，它永远不会改变（对重置输入很有用）。

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