mootools中改变背景颜色问题
我有以下 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').removeClass('info');
$('email').addClass('info_edit');
背景颜色保持不变,即; #FFFFFF
,但“info_edit”类的背景颜色为“#F2F2F2”
I have the following css classes:
.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;
}
I am changing the background color and styles using the following code:
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();
}
In order to attract the user's attention, I have added that animation, but now what happens is if I change the class of the 'email' element using the following code:
$('email').removeClass('info');
$('email').addClass('info_edit');
the background color remains the same i.e; #FFFFFF
, but the 'info_edit' class has background-color as '#F2F2F2'
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
当您调用时:
MooTools 正在操作该元素的内联样式。这种类型的样式会覆盖类中声明的任何样式(即使该类是在应用内联样式后添加的)。当您检查元素时,您可以使用 Firebug 或类似工具的“样式”选项卡来查看这一点。
要解决此问题,您可以将
background-color
设置为null
或''
以显式删除background 的内联样式-颜色:
When you're calling:
MooTools is manipulating the inline styles of that element. This type of styling overrides any style declared in a class (even if the class is added after the inline style is applied). You can see this using the "style" tab of Firebug or similar when you're inspecting an element.
To get around this, you could set the
background-color
tonull
or''
to explicitly remove the inline-style forbackground-color
: