如何在. CSS()方法后恢复到原始CSS值

how to revert to original css values after .css() method

本文关键字：CSS 恢复 原始 方法      更新时间：2023-09-26

我有一个元素，我要用动画改变如下:

that$.animate({
                    opacity:'0.0'
                },300,
                function() {
                    $('#menuHolder').css({
                        left:'0px',
                        top:'0px',
                        height:'100%',
                        width:'100%',
                    },0);

这意味着使menuHolder占据整个屏幕。当单击单独的按钮时，我希望menuHolder恢复到我在样式表中分配的原始值。下面是返回按钮的代码:

$('.return').bind('click',
        function() {
            $(this).hide(300);
            tMT$ = $(this).parent();
            tMT$.animate({
                opacity:'0.0'
            },300,
            function() {
                $('#menuHolder').css({
                    left:$(this).style.left,
                    top:$(this).style.top,
                    height:$(this).style.height,
                    width:$(this).style.width
                },0);
            })

这不起作用，因为当that$.animate被执行时，我已经分配了原始的css值。我应该如何分配.return的点击值，使menuHolder恢复到原来的css?

我不想手动重新赋值。我宁愿用程序来做它=D。如果有任何帮助就太好了。

欢呼。

这就是为什么你不应该从你的jQuery/Javascript代码更改单个CSS属性。除了不够优雅、可读性和可维护性，以及没有将表示与行为分离之外，它还会导致像你这样的情况。

:

在CSS文件中创建类:

.full-screen { left: 0; top: 0; width: 100%; height: 100%; }

，只使用jQuery/Javascript添加/删除它们:

$('#menuHolder').addClass('full-screen');
...
$('#menuHolder').removeClass('full-screen');
jQuery类操作方法

我同意其他的答案。但是…

有时需要在脚本中添加css。例如，当动画或设置动态css属性时。

.addClass()与。css()的区别

.addClass()实际上为它添加了一个类和CSS。

.css()为

标签添加CSS

例子
<!-- default -->
<div></div>
<!-- added class -->
<div class="added-class"></div>
<!-- added css -->
<div style="height:100px"></div>

把它改回来的方法就是把这个属性留为空。

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

它将完全删除style-属性并输出:

<!-- removed css -->
<div></div>

实现此目的的最佳方法是添加一个类，当您想要恢复原始CSS时可以删除该类。这也使得维护更容易，所有的CSS都留在样式表中。

$('#menuHolder').addClass('animate')

和

$('#menuHolder').removeClass('animate')

:

.animate {
left:0px;
top:0px;
height:100%;
width:100%;
}
相关文章：