元素样式与计算样式具有不同的值

我遇到了一个令人迷惑的问题，其中属性的计算样式具有与元素样式不同的值。元素样式与计算样式具有不同的值

几句话先来形容我的情况

我动画元素的background-color属性，当动画结束，我检索计算的bgcolor值，并将其应用到元素的样式。这工作正常

但是，如果我现在尝试改变bgcolor什么也没有发生，虽然值确实设置在元素上，如开发人员工具报告。

此时，如果您在样式和计算样式之间切换（通过浏览器的开发人员工具），则2报告与计算样式优先考虑的内容之间存在差异。

我已经创建了小提琴描绘的情况 http://jsfiddle.net/d2S3d/14/

附加测试脚本也有一些示例CSS原因计算器不让我提交后没有它

.animate { 动画名：bg_kf; animation-duration：5s;动画定时功能：线性; animation-delay：0s; animation-iteration-count：1; animation-fill-mode：forwards; 动画方向：正常;

-webkit-animation-name: bg_kf; 
    -webkit-animation-duration: 5s; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-delay: 0s; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-fill-mode: forwards; 
    -webkit-animation-direction: normal; 

    -moz-animation-name: bg_kf; 
    -moz-animation-duration: 5s; 
    -moz-animation-timing-function: linear; 
    -moz-animation-delay: 0s; 
    -moz-animation-iteration-count: 1; 
    -moz-animation-fill-mode: forwards; 
    -moz-animation-direction: normal; 

    -o-animation-name: bg_kf; 
    -o-animation-duration: 5s; 
    -o-animation-timing-function: linear; 
    -o-animation-delay: 0s; 
    -o-animation-iteration-count: 1; 
    -o-animation-fill-mode: forwards; 
    -o-animation-direction: normal; 
} 

@keyframes bg_kf { 
    from {background-color:#FFFFFF} 
    to {background-color:red} 
} 

@-moz-keyframes bg_kf { 
    from {background-color:#FFFFFF} 
    to {background-color:red} 
} 

@-webkit-keyframes bg_kf { 
    from {background-color:#FFFFFF} 
    to {background-color:rgba(255, 140, 74, 0.16)} 
} 

@-o-keyframes bg_kf { 
    from {background-color:#FFFFFF} 
    to {background-color:rgba(255, 140, 74, 0.16)} 
}

任何帮助表示赞赏问候

来源

2012-12-18 Thomas

对我来说，计算出的样式正是我在样式中设置的样式。如您所知，内联样式优先于样式表中设置的样式。你的设置可能是什么？试试不同的浏览器？ –

@JamieHutber单击该div，然后在动画时单击将背景更改为黑色的按钮。你会发现没有任何反应。 –

这里的问题是，你已经在.animate定义动画属性保持背景颜色为红色，无论什么样的实际内嵌样式规则规定。这就是为什么切换内联样式似乎没有任何影响。

如果你是在应用内嵌样式后删除.animate类权利，一切都将再次恢复正常：

$("#sample").bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(){ 
    var computedBg = $(this).css('background-color'); 
    $(this).css('background-color', computedBg); 
    $(this).removeClass('animate'); 
});

这里是一个演示（尝试点击该按钮在动画完成后，）：http://jsfiddle.net/vcfDj/

来源

2012-12-18 11:11:36

你是对的。但是不应该将内联样式优先而不是类名称？ – Thomas

@Thomas它的确如此。如果您将“background-color”属性添加到该类中，并将一个不同的“background-color”属性内联添加，则内联属性将是“获胜”的属性。不幸的是，我们正在寻找两种完全不同的CSS属性（动画和背景色）。可以这样想：如果我要内联地设置一个“height：100px”属性，然后应用一个设置为“display：none”的类，那么计算后的高度仍然是0像素，而不管活动CSS为'高度'是100px。 –

感谢Asad的解释。非常感激 – Thomas

您已设置动画填充模式“转发”。这样做的效果是将动画CSS属性保留在动画结束时的值（不管其他样式设置如何）。将其设置为“无”将解决您的问题！

来源

2013-06-02 09:40:46 Doin

元素样式与计算样式具有不同的值

回答

相关问题