时间戳

首页 > 解决方案 > 如何更改类中属性的值？

javascript - 如何更改类中属性的值？

问题描述

我有这个 javascript 代码：

<input class="inp " type="text" value="0.01" inputmode="numeric">

我想更改属性值，但我没有尝试过。我试过这个地铁：

document.getElementsByClassName("inp")[0].value=0.02;
document.getElementsByClassName("inp")[0].setAttribute("value","0.02");
document.querySelector("input.inp").value=0.02;

这些似乎都不起作用，它们只是更改了表面或 hud 上的值，但是当我尝试使用更改后的值时，它始终是我进行更改之前的值。

我做错了什么还是网站只是限制了该属性的更改？

标签： javascript

解决方案

你在这里有一个强烈的误解。value 您的代码工作正常，问题是您在修改属性时的期望。

value 属性（与属性相反！value ）仅用于一个目的：在 HTML 中以声明方式定义初始值 。使用任何 Javascript，您通常都不会与属性交互。value

稍后更改它不会更改显示的值（但会更改el.defaultValue），也不会通过与元素交互来更改值更新属性。

const el = document.querySelector("input.inp");
console.log(`el.value: ${el.value}, <input value="${el.getAttribute('value')}">, el.defaultValue: ${el.defaultValue}`);

el.value=0.33;
console.log(`el.value: ${el.value}, <input value="${el.getAttribute('value')}">, el.defaultValue: ${el.defaultValue}`);

el.setAttribute("value","0.66");
console.log(`el.value: ${el.value}, <input value="${el.getAttribute('value')}">, el.defaultValue: ${el.defaultValue}`);
<input class="inp" type="text" value="0.01">

推荐阅读