Question

如果HTML代码中有另一个类，则可以使用id将值设置为“div”。我目前正在研究JS，我遇到了一个问题，即这个简单的代码不起作用。

function change_visibility() {
    if (document.getElementsByClassName('mobile')) {
        document.getElementById('#cube').style.width = '10px';
    }
}

Answer 1

问题＃1

document.getElementById('#cube')

会找到像

这样的元素

<elem id="#cube" />

但不像

这样的元素

<elem id="cube" />

要找到后者，您需要省略#：

document.getElementById('cube')

问题＃2

document.getElementsByClassName('mobile')

将始终在if条件中解析为true

if (document.getElementsByClassName('mobile'))

即使找不到具有该类名的元素。

您想要检查length返回的HTMLCollection的document.getElementsByClassName('mobile')：

if (document.getElementsByClassName('mobile').length)

解释

即使没有具有该类名的元素，为什么它也会返回true？

提供方法document.getElementsByClassName的DOM API定义了此方法返回的数据类型。数据类型是名为HTMLCollection的类数组数据类型。即使document.getElementsByClassName找不到任何元素，也会返回此数据类型 - 它只是一个没有元素的HTMLCollection，非常类似于空Array []。

要了解项目在条件中使用时解析的Boolean值（true / false），您只需在控制台中输入它并隐式使用双重否定Boolean

将其转换为!!

＆＃13;

console.log(!![])

let a = document.getElementsByClassName('weirdLongClassNameThatDoesReallyNotExistInTheDOM')

console.log(!!a)

＆＃13;

基本上你的代码就是这样做的：

if (true) {
   document.getElementById('#cube').style.width = '10px';
}

表示if块内的代码将始终执行。

如何在特定类存在时更改元素的样式？

1 个答案:

问题＃1

问题＃2

解释