Question

是否可以使用默认值覆盖display属性？例如，如果我在一种样式中将其设置为none，并且我希望以默认值将其覆盖为其他样式。

或者是找出该元素的默认值然后将其设置为的唯一方法？想要不必知道元素通常是块，内联还是其中任何一个......

Answer 1

浏览器的默认样式在其用户代理样式表中定义，您可以在其中找到here的来源。不幸的是，Cascading and Inheritance level 3 spec似乎没有提出将样式属性重置为其浏览器默认值的方法。但是，有计划在Cascading and Inheritance level 4中为此重新引入关键字 - 工作组尚未确定此关键字的名称（该链接目前显示为revert，但它不是最终的）。有关revert的浏览器支持的信息，请访问caniuse.com。

虽然3级规范确实引入了initial keyword，但将属性设置为初始值会将其重置为CSS定义的默认值，< em>不是浏览器定义的。 display的初始值为inline;这是here指定的。 initial关键字是指该值，而不是浏览器默认值。规范本身在all property：

下进行了说明

例如，如果作者在元素上指定all: initial，它将阻止所有继承并重置所有属性，就好像级联的作者，用户或用户代理级别中没有出现规则一样。

这对于页面中包含的“窗口小部件”的根元素非常有用，它不希望继承外部页面的样式。但请注意，应用于该元素的任何“默认”样式（例如，来自display: block等块元素的UA样式表中的<div>也将被吹走。

所以我想现在使用纯CSS的唯一方法是查找浏览器默认值并手动设置为：

div.foo { display: inline-block; }
div.foo.bar { display: block; }

（上面的替代方法是div.foo:not(.bar) { display: inline-block; }，但这涉及修改原始选择器而不是覆盖。）

Answer 2

如果允许使用javascript ，则可以将display属性设置为空字符串。这将导致它使用该特定元素的默认值。

var element = document.querySelector('span.selector');

// Set display to empty string to use default for that element
element.style.display = '';

以下是jsbin的链接。

这很好，因为您不必担心要恢复的不同类型的显示（block，inline，inline-block，table-cell，等）。

但是，它需要javascript，所以如果您正在寻找仅限css的解决方案，那么这不适合您。

注意：这会覆盖内联样式，但不会覆盖css中设置的样式

Answer 3

取消设置`display`：

您可以使用同时适用于Firefox and Chrome的值unset。

display: unset;

.foo     { display: none;  }
.foo.bar { display: unset; }

Answer 4

不，通常不可能。一旦某些CSS（或HTML）代码为元素上的属性设置值，就无法撤消它并告诉浏览器使用其默认值。

当然可以将属性设置为期望的值作为默认值。如果您查看HTML5 CR的Rendering部分，这可能会相当广泛，主要反映了浏览器实际执行的操作。

仍然，答案是“否”，因为浏览器可能有他们喜欢的任何默认值。您应该分析想要重置为默认值的原因; 原始问题可能仍然可以解决。

Answer 5

如果您可以访问 JavaScript ，则可以创建元素并读取其计算样式。

function defaultValueOfCssPropertyForElement(cssPropertyName, elementTagName, opt_pseudoElement) {
    var pseudoElement = opt_pseudoElement || null;
    var element = document.createElement(elementTagName);
    document.body.appendChild(element);
    var computedStyle = getComputedStyle(element, pseudoElement)[cssPropertyName];
    element.remove();
    return computedStyle;
}

// Usage:
defaultValueOfCssPropertyForElement('display', 'div'); // Output: 'block'
defaultValueOfCssPropertyForElement('content', 'div', ':after'); // Output: 'none'

Answer 6

关于BoltClock和John的回答，我个人在使用IE11时遇到了初始关键字的问题。它在Chrome中运行良好，但在IE中似乎没有效果。

根据这个答案，IE不支持初始关键字： Div display:initial not working as intended in ie10 and chrome 29

我尝试将其设置为空白，而不是按照此处的建议： how to revert back to normal after display:none for table row

这对我的情况来说非常有用。当然要设置真正的初始值，上面的答案是我能找到的唯一好处。

Answer 7

以我对您问题的理解为例：您在样式表的开头有一个样式（例如background-color：红色），然后使用Java脚本将其更改为另一种样式（例如background-颜色：绿色），现在您想将样式重置为样式表中的原始值（背景颜色：红色），而无需提及甚至不知道其值（例如element.style.backgroundColor ='red'）...！

如果我是对的，那么我为您提供了一个很好的解决方案，该解决方案是使用另一个类名作为元素：

步骤：

根据需要，像往常一样在样式表中设置默认样式。
在样式表中定义新的类名称，然后添加所需的新样式。
要在样式之间触发时，请将新的类名添加到元素中或将其删除。

如果要编辑或设置新样式，请通过新的类名获取元素，然后根据需要编辑样式。

我希望这会有所帮助。问候！

将CSS显示属性重置为默认值

7 个答案:

取消设置`display`：

将CSS显示属性重置为默认值

7 个答案:

取消设置display：

取消设置`display`：