javascript - 为什么 IntelliSense 不能将我的查询选择项识别为元素?

标签 javascript html css visual-studio-code intellisense

问题

我想弄清楚为什么当我访问 HTML 元素时 VSCode 的 IntelliSense 不会建议元素对象属性:

document.querySelector();

每当我使用 document.querySelector() 方法然后使用 . 运算符来尝试查看所选元素的属性时,我都没有得到CSS 属性列表,例如 style

例子

我的 HTML 文件中有一个类为“list”的 div 元素

<div class='list'>

在我的 .js 文件中,我可以通过以下方式访问此元素:

const listElement = document.querySelector('.list');

我的问题是,在 listElement 上使用 . 运算符时,VSCode 不显示 style 等基本属性。我仍然可以通过手动输入类似的内容来设置内容

listElement.style.display = 'none';

但是当我使用 . 运算符时,VSCode 不建议 style 并且当我键入 style 并再次使用 . 运算符时,它不会建议显示。我的问题是: 如何让 Intellisense 显示这些属性?

注意:我是 HTML、CSS 和 Javascript 的新手,所以我不知道我是否使用了所有正确的术语,但我试过了!

最佳答案

VS Code 的 JavaScript IntelliSense 不知道您的 HTML 是什么样子,因此它会假设 querySelector 返回一个非常通用的对象类型。这就是为什么您看不到关于 .style 和其他一些常见 DOM 属性的建议。 querySelector 返回的内容可能实际上不存在这些属性!

但是,您可以使用简单的 JSDoc type annotation 显式告诉 VS Code querySelector 返回的元素类型。 :

/** @type {HTMLDivElement} */
const listElement =  document.querySelector('.list');

这应该为您提供适当的 IntelliSense:

Example of IntelliSense on HTML div element after the type has been declared.

关于javascript - 为什么 IntelliSense 不能将我的查询选择项识别为元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58422969/

相关文章:

html - 视口(viewport)外的相关元素

javascript - HTML 文档中脚本标签的位置 - <head> 和 <body> 具有不同的行为

jquery - 如何更改 2 个不同的 Bootstrap Modals 的背景颜色?

html - 如何在文本框和我在 boostrap here 中创建的 html 表单之间添加空格?

javascript - JSON.stringify如何自动将矩对象转换为iso字符串?

javascript - 错误 : Rule can only have one resource source (provided resource and test + include + exclude)

Android 不在 HTTPS 上播放 HTML5 视频

jquery - 拖动可调整大小的 2 列布局

javascript - Swiper slider 不会在移动设备上滑动幻灯片

javascript - 替换 JavaScript 中字符之间的多个字符串