1

我只是在单击按钮时更改按钮的color和。background-color

<input type="button" value="click me" id="myButton" onclick="ChangeColor()"/>

这个按钮的CSS包含 和 的 CSS 过渡color，background-color但是，在:hover伪元素上我没有添加任何样式，我没有更改颜色。

#myButton{
     color:#3399FF;
     background-color:#FFFFFF;
     /* These transitions are supposed to change the color in case I hover over the button */
     -webkit-transition: background 0.5s,color 0.5s;
        -moz-transition: background 0.5s,color 0.5s;
            transition: background 0.5s,color 0.5s;
}
#myButton:hover{
     /* But since there's nothing here, the color won't change when I hover */
}

现在，当我通过 JavaScript 更改样式时，它们会在使用过渡时发生变化，这意味着颜色会在 之后发生变化0.5s，而不是立即发生变化。

function ChangeColor()
{
   document.getElementById("myButton").style.color = "#FFFFFF";
   document.getElementById("myButton").style.backgroundColor = "#3399FF";
}

这是一件非常好的事情，我喜欢它，但我只是想知道，JavaScript 如何尊重 CSS3 转换？有这方面的文件吗？

4

2 回答 2

3

只要属性的值发生更改，就会应用您的转换。无论您是否通过 JavaScript 在悬停、焦点、调整大小（例如使用媒体查询）、单击或任何其他事件上更改它都没有关系。

通常，您可以在元素的两种状态之间进行转换。您首先定义初始状态：

#myButton {
     color: #39f;
     background: #fff;
     transition: .5s;
}

当您更改这两个属性中的任何一个的值时（无论您是使用:hover伪类还是 JavaScript 都没有关系），您的元素将进入另一个状态，并且您将在初始状态的属性和这个新状态的属性。

于 2013-03-15T23:55:42.517 回答
2

您使用 JavaScript 更改样式的方法本质上是一种style直接在元素本身上手动更改属性的方法。每当样式更改为其他样式并且您为其定义了过渡时，该过渡将激活以更改为新样式。这包括 JavaScript 对样式所做的更改。

于 2013-03-15T23:55:19.513 回答