是否可以更改dom-element属性类型？ （数字，字符串等）

Question

考虑输入字段

<input type="number" id="output" disabled="true">

是这样的吗？

var output = Document.getElementById("output");
output.value = Number(0);

我测试了它并且没有效果（+ =运算符仍然是字符串连接）。有没有办法改变dom-element属性的变量类型？

行中究竟发生了什么

Document.getElementById("output").value = Number(0);

为什么它对类型没有影响？

这是否仅适用于Dom-objects，还是其他情况下这种不变性也适用于（或者我是否可以为变量主动定义它）？

PS：我知道我可以简单地使用临时变量来避免这样的问题，但我想知道为什么DOM属性不受output.value = Number(0);

的影响

Answer 1

您应该使用元素的setAttribute函数，而不是直接为DOM元素属性赋值。

var output = Document.getElementById("output");
output.setAttribute('value',Number(0));

  

为什么它对类型没有影响？

DOM元素的属性是HTML的一部分，由于HTML结构，所有属性值应始终引用（https://www.w3.org/TR/xhtml1/diffs.html#h-4.4），因此对于为属性设置的任何值，它将被存储为字符串。

这意味着即使您在结尾处明确地给出了属性'value'的值Number（0），它也将存储在HTML结构中，如下所示：

<input type="number" id="output" disabled="true" value="0"/>

正如你所看到的那样，这是属性值的字符串表示，对于0，字符串表示为“0”，如果你试图用另一种类型设置一个属性，例如一个对象，你将拥有像这样的东西。

//setting a custom attribute the value: {a:10}
document.getElementById('output').setAttribute('myattr',{a:10})

HTML：

<input type="number" id="output" disabled="true" myattr="[object Object]">