Question

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

.foo {
    height: 70vh;
}

我用jQuery改变div.foo的高度：

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

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

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

Answer 1

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

如果您有例如这个命令：

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

您可以通过

撤消它

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

另见此处的讨论：https://stackoverflow.com/a/4036868/3233827

Answer 2

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

Answer 3

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

＆＃13;

$('.foo').css('background', 'teal');

$('#reset').click(function() {
    $('.foo').removeAttr('style');
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何为单个HTML元素重新加载或重新呈现CSS？

3 个答案: