Question

我有以下css类：

.info {
    padding-left: 15px;
    padding-bottom: 20px;
    display: block;}
.info_edit {
    background-color: #F2F2F2;
    padding-left: 15px;
    display: block;
    border-bottom: 1px solid #E9E9E9;
 }
.info_wait {
  padding-left: 15px;
padding-bottom: 20px;
display: block; 
background:url(../js/Assets/fbloader.gif) center center no-repeat #fff;
  }

我正在使用以下代码更改背景颜色和样式：

function emailEdit() {
    var request = new Request({
        url: '${email_edit}',
        onRequest: function() {
            $('email').set('html','');
            $('email').removeClass('info_edit');
            $('email').addClass('info_wait');
        },
        onSuccess: function(response) {
            $('email').removeClass('info_wait');
            $('email').addClass('info');
            $('email').set('html', response);
                    var myFx = new Fx.Tween('email', {
                        duration: 500,
                        transition: Fx.Transitions.Sine.easeInOut
                    });
                    myFx.start('background-color','#F2F2F2')
                        .chain(function(){
                            myFx.start('background-color','#FFFFFF');
                        }).chain(function(){
                            myFx.start('background-color','#F2F2F2');
                        }).chain(function(){
                            myFx.start('background-color','#FFFFFF');
                        }); 
        }
    }).send();
}

为了吸引用户的注意，我添加了动画，但现在发生的情况是如果我使用以下代码更改'email'元素的类：

$('email').removeClass('info');
$('email').addClass('info_edit');

背景颜色保持不变，即; #FFFFFF，但'info_edit'类的背景颜色为'＃F2F2F2'

Answer 1

当你打电话时：

myFx.start('background-color','#FFFFFF');

MooTools正在操纵该元素的内联样式。这种类型的样式会覆盖在类中声明的任何样式（即使在应用内联样式后添加了类）。在检查元素时，您可以使用Firebug的“样式”选项卡或类似标签来查看。

要解决此问题，您可以将background-color设置为null或''以明确删除background-color的内联样式：

$('email').removeClass('info');
$('email').setStyle("background-color", ''); // <-- Remove inline style
$('email').addClass('info_edit');

改变mootools中的背景颜色问题

1 个答案: