如何解决从开发人员控制台中取消选中CSS属性是什么意思?如何使用javascript进行模拟?
当我在开发者控制台中取消选中CSS属性时,到底发生了什么(用红色标记)
我希望获得与在开发者控制台中取消选中height
时发生的行为完全相同的行为(当前设置为height:auto!important)。我尝试过
element.style.height = "unset"
但是这不起作用。使用javascript,我该怎么做?
解决方法
当我在开发者控制台中取消选中CSS属性时,到底发生了什么
它删除了规则,同时存储了足够的数据,可以轻松地再次添加。
这将导致应用来自另一个来源的属性的另一个规则(例如页面样式表中的另一个规则集,浏览器的默认样式表或继承的值)。
使用javascript如何出现相同的行为?
遇到困难。
您需要标识规则的来源,该来源可以是内联样式(通过DOM元素上的style
属性访问)或规则集(通过CSSOM访问)。
然后,您需要记录当前位置和值,以便以后重新应用。
然后,您必须删除该值。
element.style.height = "unset"
但这不起作用。
这有两个问题:
- 它没有考虑
!important
规则 -
unset
将值重置为初始值或继承的值,它不会删除规则,而是应用先前级联的规则。
非主题:不是您提出问题的方法,而是解决您问题的方法。
Quentin gave a good answer上关于您要执行的操作有多困难的问题,我在他的回答中添加了一条评论,那就是最重要的是,浏览器可能会完全阻止您这样做,所以让我们来解决一下根本的问题,而不是您尝试解决的问题:
您正试图禁用.accountBox { height: auto!important; }
,因为它会覆盖您的内联定义的height: 409px
,对吧?
但是它已经变成specifity war。就像谁对值的价值拥有最后的发言权。
由于无法更加具体地定义内联样式,因此需要通过将内联高度也设置为重要来推翻.accountBox
上的重要高度:
(如果正确,margin-bottom
也一样)
element.style.setProperty("height","409px","important");
element.style.setProperty("margin-bottom","24px","important");
或
<div class="accountBox" style="height: 409px!important; margin-bottom: 24px!important;">
,
您可以设置默认值,例如:
element.style.height = "auto"
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。