Question

我试图通过考虑内联和类样式来确定哪种样式适用于元素。 Javascript将这两者解析为对象，但未设置的样式是空字符串，而不是display:none。如果样式为＆＃34;为空＆＃34; （例如document.getElementById('ele').style.display = '';）无效，无论规则的具体程度如何，那么我的目标都是微不足道的。

但是，为了动态地使用默认规则覆盖display，我知道{{1}}有效，虽然我知道它实际上并没有添加{{1}}内联样式，什么样的样式在CSS中设置为空时有效？如果是这种情况，我将不得不手动解析样式和样式表字符串以查看属性是否已定义。

Answer 1

在样式表或样式声明块中编写display:;或display:'';是无效的声明。

元素的style属性是另一回事。这是一种设置和获取元素的内联样式的便捷机制。设置值实际上是.setProperty的简写，并为.getPropertyValue提供一个简写。

<div></div>

=>
element.style.display == ''
element.getPropertyValue('display') == null

由于未设置内联样式，因此display没有值，因此getPropertyValue('display')会返回null。

现在我们知道.display是.getPropertyValue('display')的缩写，让我们看看specification对返回值的说法：

如果已为此声明块显式设置，则返回该属性的值。如果尚未设置属性，则返回空字符串

所以空字符串等于没有值。

element.style.display = 'none'

=>
<div style="display: none;"></div>
element.getPropertyValue('display') == 'none'

如您所见，我们可以使用.style轻松设置内联样式。如果我们现在尝试设置无效值，它将被忽略：

element.style.display = 'foo'

=>
<div style="display: none;"></div>
element.getPropertyValue('display') == 'none'

没有任何改变。将值设置为空字符串可以正常工作，因为它等同于没有样式：

element.style.display = ''

=>
<div></div>
element.getPropertyValue('display') == null

将display设置为null也会有效。

是否有任何CSS规则，当设置为空字符串时，覆盖低特异性规则

1 个答案: