<input name='x' id='y' list='z'>在 JavaScript 中，你可以这样做var input = document.createElement('INPUT');input.id = 'x'; //this worksinput.name = 'y'; //this also worksinput.list = 'z'; //this does not work我的问题很简单：这里发生了什么魔法？为什么 .id 和 .name 有效，但 .list 无效（需要使用 setAttribute 设置） ？有没有办法知道（除了知道一切）在输入元素上设置列表属性的方法正在使用setAttribute("list", "z");？setAttribute 调用的魔力是什么，而 input.list 不是？
2 回答
LEATH
TA贡献1936条经验 获得超6个赞
这不起作用，因为listan 的属性HTMLInputElement被定义为只读
interface HTMLInputElement : HTMLElement {
[HTMLConstructor] constructor();
...
readonly attribute HTMLElement? list;
...
}
交互式爱情
TA贡献1712条经验 获得超3个赞
这里的问题是像id和这样的属性name可以追溯到文档对象模型 (DOM)的更旧版本——可以追溯到1990 年代中期的DOM 级别 0（或“旧版 DOM” ）。这些 DOM 属性与 HTML 标记中的同名属性完全对应。
相比之下，将元素list的预定义内容附加<datalist>到<input>元素的属性要晚得多。它在 2018-19 年左右开始出现在大多数浏览器中。
（即使是现在，CanIUse 也表明它在 Firefox 中还没有准备好......尽管我自己在Firefox 83中的实验表明它已经准备好了。）
因此，最可靠的方法是使用：
const myInput = document.createElement('input');
myInput.setAttribute('id', 'x');
myInput.setAttribute('name', 'y');
myInput.setAttribute('list', 'z');
console.log(myInput.getAttribute('id'));
console.log(myInput.getAttribute('name'));
console.log(myInput.getAttribute('list'));
添加回答
举报
0/150
提交
取消