如何在打字稿中按类名选择元素？

Question

我正在尝试设计在小屏幕中折叠的响应式菜单栏,但是,我正在使用打字稿.是否有任何线索与打字稿中的此代码等效

function myFunction() {
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");}

我在打字稿中更改为此代码,但它永远不会有效

myFunction(): void {
(<HTMLScriptElement[]><any>document.getElementsByClassName("topnav"))[0].classList.toggle("responsive");
}

Answer 1

没有必要改变任何东西因为typescript是javascript的超集,所以即使是常规的javascript也可以是打字稿.

话虽如此,您可以添加一些打字稿功能:

function myFunction(): boolean {
    let elements: NodeListOf<Element> = document.getElementsByClassName("topnav");
    let classes: DOMTokenList = elements[0].classList;
    return classes.toggle("responsive");
}

但是没有必要像这样拆分它们,所以你可以拥有你的确切代码,但可能会在函数签名中添加一个返回类型:

function myFunction(): void {
    document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}

要么

function myFunction(): boolean {
    return document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}