从开发人员控制台取消选中css属性意味着什么？我如何使用javascript来模拟它？

当我在开发者控制台中取消选中CSS属性时，到底发生了什么，如图所示（用红色标记）

我想要与在开发人员控制台中取消选中

height

时完全相同的行为（当前设置为height:auto！important）。我试过了

---

但这是行不通的。如何使用javascript实现相同的行为？

您可以设置如下默认值：

element.style.height = "auto"

当我在开发人员控制台中取消选中CSS属性时，到底发生了什么，如图所示

它删除了规则，同时存储了足够的相关数据，以便可以轻松地再次添加

这将导致应用来自其他源的属性的其他规则（例如页面样式表中的其他规则集、浏览器的默认样式表或继承的值）

如何使用javascript实现相同的行为

困难重重

您需要确定规则的源，它可以是内联样式（通过DOM元素上的

style

属性访问）或规则集（通过访问）

然后需要记录当前位置和值，以便以后可以重新应用它

然后必须删除该值

---

但这是行不通的

这有两个问题：

• 它不考虑

  ！重要

  规则

• unset

  将值重置为初始值或继承值，它不会删除规则并应用以前的级联规则

---

离题：不是回答你的问题，而是解决你的问题
我在他的回答中添加了一条评论，除此之外，浏览器可能会完全阻止你这么做，所以让我们来探讨潜在的问题，而不是你试图解决它：
您试图禁用

.accountBox{height:auto！important；}

，因为它正在覆盖您的内联定义的

高度：409px

，对吗
但它已成为一种趋势。比如谁对价值有最后的决定权
由于无法使内联样式更加具体，因此需要通过使内联高度也变得重要来否决

.accountBox

上的重要高度：
（如果我是正确的，

页边距底部也一样）

或

这只是将其更改为一个新的值，它不会删除现有的值，而让另一个现有的规则代替它。充其量只能是“困难地”。在某些样式表上，浏览器完全阻止您访问规则。不知道确切的时间，只是说在困难之上，这也是不可靠的。
element.style.height = "auto"

element.style.height = "unset"

element.style.setProperty("height", "409px", "important");
element.style.setProperty("margin-bottom", "24px", "important");

<div class="accountBox" style="height: 409px!important; margin-bottom: 24px!important;">