将CSS的display属性重置为默认值

Question

将CSS的display属性重置为默认值

cssdefault

204

是否可以覆盖display属性，使其返回默认值？例如，如果我在一个样式中将其设置为none，并且我想在另一个样式中将其覆盖为默认值。

还是找出该元素的默认值并将其设置为默认值是唯一的方法？希望不需要知道元素通常是块级、内联或其他哪种类型...

- Svish

11

现在可以使用 unset。 - mins

显示测试：unset，initial，inherit，revert。点击链接。 - Theraot

3

我知道这个问题只是询问如何将显示重置为浏览器默认设置，但对于许多人来说，他们会访问此页面以将所有属性重置为浏览器默认设置，请使用以下代码：.myclass { all: unset; }div { all: unset; }等等。 - user1254723

8个回答

37

如果允许使用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中设置的样式

- thetallweeks

13

请注意，这仅适用于使用 JavaScript 或内联 style 属性设置样式的情况。您无法使用此方法覆盖或删除样式表中的声明。 - BoltClock

1

@BoltClock 我不同意。这里有一个 jsfiddle，我认为它证明了你所说的是错误的。http://jsfiddle.net/g45qagt3/ - thetallweeks

9

抱歉，我使用“override”这个词可能有些令人困惑。我的意思是将样式设为空字符串只会删除通过style属性或JavaScript设置器应用的样式。如果您通过JS设置特定值，仍然可以覆盖样式表声明，但将其设置为空相当于根本没有设置 - 样式表声明将保持不变。请参见修改后的fiddle：http://jsfiddle.net/BoltClock/g45qagt3/1 - BoltClock

1

值得注意的是，空字符串适用于任何属性，而不仅仅是“display”。 - Artur INTECH

2021年：我非常确定我必须返回旧代码并修复它，因为它不再假定默认值... - Ayyash

20

取消 `display` 属性:

你可以使用值为 unset 的属性，这在 Firefox和Chrome 都适用。

display: unset;

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

- Sheharyar

11

“unset” 与 “initial” 存在相同的问题。display 的值将变为 “inline”。请参阅 https://codepen.io/Gidgidonihah/pen/mwWxEq。 - Gidgidonihah

1

OP 明显想要将每个元素重置为默认值，例如将 span 重置为 inline，将 div 重置为 block。unset 无法解决这个问题，因为它是按属性重置的，并且始终会将显示重置为 inline。请考虑更新您的答案。 - krulik

8

不，一般情况下是不可能的。一旦CSS（或HTML）代码为元素的属性设置了一个值，就没有办法撤销它并告诉浏览器使用其默认值。当然，可以将属性设置为您期望的默认值。如果检查HTML5 CR的Rendering部分，则此方法可能会相当广泛地工作，大多反映浏览器实际执行的操作。但仍然是“不”，因为浏览器可能具有任何他们喜欢的默认值。您应该分析想要重置为默认值的原因；原始问题可能仍然可以解决。

- Jukka K. Korpela

8

对我有用的是 revert！

revert 会将属性重置为其从父级继承的值或者用户代理样式表中默认值。

- Roland

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'

- Frederik Krautwald

1

看起来你必须将生成的元素实际附加到<body>标签中，才能在Chrome中获取计算样式。 - dimplex

4

关于BoltClock和John的回答，我个人在使用IE11时出现了最初的关键字问题。在Chrome中它工作得很好，但在IE中似乎毫无效果。

根据这个答案，IE不支持initial关键字： Div display:initial not working as intended in ie10 and chrome 29 我尝试将其设置为空，如此处所建议： how to revert back to normal after display:none for table row 这起作用并且对我的情况足够好。当然，要设置真正的初始值，上面的答案是我能找到的唯一好的答案。

- Søren Ullidtz

0

根据我对你问题的理解，举个例子：你在样式表中最初设置一个样式(例如背景颜色:红色)，然后使用 JavaScript 将其更改为另一种样式(例如背景颜色:绿色)，现在你想将该样式重置为样式表中的原始值(背景颜色:红色)，而不必提及或甚至知道其值(例如：element.style.backgroundColor='red')...!

如果我理解正确，我有一个好的解决方案可以提供给你，那就是为元素使用另一个类名：

步骤如下：

像往常一样在样式表中设置默认样式。
在样式表中定义一个新的类名并添加所需的新样式。
当你想在两种样式之间切换时，向元素添加或删除新类名即可。

如果你想编辑或设置新的样式，请按新类名获取元素并按需要编辑样式。

希望这可以帮助到你。祝好！

- mohamad b

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

浏览器的默认样式定义在其用户代理样式表中，您可以在这里找到其来源。不幸的是，级联和继承级别3规范似乎没有提出将样式属性重置为其浏览器默认值的方法。然而，在级联和继承级别4中有重新引入此关键字的计划 - 工作组尚未确定此关键字的名称（链接目前显示为revert，但它并非最终版本）。有关revert的浏览器支持信息可以在caniuse.com上找到。

尽管 level 3 规范引入了initial 关键字，将属性设置为初始值会将其重置为CSS定义的默认值，而不是浏览器定义的值。 display 的初始值为 inline；可以在此处指定。关键字initial 指的是该值，而不是浏览器默认值。规范本身在all 属性下做了这个注释：

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

这对于页面中包含的“小部件”的根元素很有用，它不希望继承外部页面的样式。但请注意，也会清除应用于该元素的任何“默认”样式（例如 UA 样式表上块元素（如<div>）的display: block）。

因此，我猜现在唯一使用纯 CSS 的方法是查找浏览器默认值并手动设置到那个值。

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

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

将CSS的display属性重置为默认值

取消 display 属性:

取消 `display` 属性: