设置值和数据集属性会给我不同的数字，尽管将相同的变量设置为两者?

Question

is I， Boogabooga，

我有一个难题，让我非常困惑。 我有一个函数，它使用 JS 动态创建一些 HTML 元素，当设置.value时，结果与我设置dataset.value时完全不同，尽管将相同的变量分配给两者，下面是我的 JS：

function displayBox(title, src, id){
let container = document.createElement('div');
let list = document.createElement('ul');
let listItem = document.createElement('li');
let image = new Image();
listItem.innerHTML = title;
image.src = src;
listItem.dataset.value = id;
listItem.value = id;
listItem.innerHTML += id;
list.appendChild(image);
list.appendChild(listItem);
container.appendChild(list);
container.classList.add('shopifyProduct');
return container;
}

这是我使用开发工具检查时的 HTML 元素

<li data-value="6736442654756" value="1933934628">Cactus Sneaker Women 6736442654756</li>

我也在innerHTML中输出值，只是为了看看我输出它的位置是否以某种方式改变了它的值。 正如您在上面的函数中看到的变量：id被分配给两个属性，但最终分配了不同的值？

以前有人遇到过这种奇怪的行为吗？

谢谢 -布加布加

Answer 1

首先，揭开结果的神秘面纱...1933934628 = 6736442654756 % 4294967296和typeof list.value === 'number'...

至于为什么???

li的value属性具有实际含义，并且显然仅限于32位

注意：根据 HTML 规范，li元素具有以下属性

内容属性：
Global attributes
如果元素不是ul或menu元素的子元素：value— 列表项的序号值

因此，只有当li是ol的孩子时，value才有意义......当ul或menu(li的唯一其他有效父级)的子代时，value没有"定义">

似乎某些(大多数？)浏览器对此没有"达到规范"......

此外，规范中没有提到 32 位限制，只是value必须是有效的整数

简而言之，不要在任何没有"本机"属性的元素上使用value属性，例如输入

您已经在使用data-value，因此请坚持使用