在JS中，检查element.style.bottom是否为空不起作用

Question

我有一个元素

<div class="my-thing"></div>

我需要以编程方式切换 javascript 中的

bottom

属性，因此我有一个简单的单击事件，该事件使用此 if 语句调用函数：

if(element.style.bottom === "") {
   //do something
}

if( element.style.bottom !== "") {
   //do something else
}

但是，如果我没有在 div 上设置样式，这两个 if 语句会同时触发。如果我/do/设置像

style="bottom: 120px;"

这样的样式，那么第二条语句就会被触发。

当它为空时，我只需要触发第一个 if 语句，而不是两者都触发。

我尝试将

=== ""

更改为

=== null

或

=== undefined

或用

||

分隔的所有 3 个，但同样的事情仍然发生。我也尝试过

!element.style.bottom

。没有一个有效。

当我在它为空时执行

console.log(element.style.bottom)

时，我会在控制台中得到

<empty string>

作为响应。

那么我如何定位一个未设置的属性？？？

Answer 1

为什么该值为空？默认情况下，它们设置为...

bottom : auto
top : auto
right : auto
left : auto

如果您尝试使用其中任何一个来设置它们......

 === ""  === null  === undefined

此类值将不会被接受，它们将被重置为默认的“自动”。

但是，您可以使用这些值中的任何一个...

"unset", "initial", "inherit", "revert"

将您的声明更改为...

if(element.style.bottom =='unset') {
   //do something
}

或者您设置的任何一个。