如何为单个 HTML 元素重新加载或重新渲染 CSS？ [复制]

Posted 2023-02-22

【中文标题】如何为单个 HTML 元素重新加载或重新渲染 CSS？ [复制]

【英文标题】：How to reload or rerender CSS for a single HTML element? [duplicate]

【发布时间】：2016-10-18 03:24:37

【问题描述】：

假设我有一个带有这个 CSS 的 div.foo：

.foo 
    height: 70vh;

我用 jQuery 改变div.foo 的高度，如下所示：

$('.foo').height(100);

如何重置div.foo 的CSS，使其高度再次呈现70vh？

一种可行的解决方案是重新加载整个 CSS 文件 this way。但是我想知道是否有解决方案只重置div.foo的CSS，而不是整个样式表？

【参考方案1】：

使用 jQuery，您可以将样式添加到元素的 style 属性中。如果您使用空字符串 ("") 再次调用该函数，它将再次被删除。这将删除 style 属性中的属性。

如果你有例如这个命令：

$('.foo').css('height', '100px');

您可以通过以下方式撤销它

$('.foo').css('height', '');

另请参阅此处的讨论：https://***.com/a/4036868/3233827

【参考方案2】：

$('.foo).height(''); 应该足以擦除 jQuery 应用的样式

【参考方案3】：

您可以从元素中删除style 属性。此属性包含任何动态样式。

$('.foo').css('background', 'teal');

$('#reset').click(function() 
    $('.foo').removeAttr('style');
);

.foo 
    height:100px;
    width:100px;
    background:red;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div class="foo"></div>
<p><button id="reset">Reset style</button></p>

【讨论】：

这将删除该元素的所有样式属性，而不仅仅是一个属性。

如果有他不想删除的内联样式怎么办？

@ssc-hrep3 这就是 OP 的要求