La propiedad de estilo HTML DOM se utiliza para cambiar la apariencia de cualquier elemento DIV. Está cambiando la apariencia cada vez que el mouse se ha desplazado sobre ese elemento.
Sintaxis
- Para devolver la propiedad de transición:
object.style.transition
- Para establecer la propiedad de transición:
object.style.transition = "property duration timing-function delay|initial|inherit"
Valores devueltos: Devuelve una string que representa la propiedad de transición de un elemento
Valores de propiedad:
| Valor | Descripción |
|---|---|
| propiedad de transición | Nombre de la propiedad CSS para el efecto de transición. |
| duración de la transición | Cuánto tiempo se tarda en completar la transición |
| transiciónTimingFunction | Velocidad de transición |
| transiciónRetraso | Punto de partida de la transición |
| inicial | Establecer en el valor predeterminado |
| heredar | Heredar de su elemento padre |
Ejemplo: en este ejemplo, estamos creando una etiqueta div cuyo CSS se define en la etiqueta de estilo y cuando pasa el mouse sobre la etiqueta div después de hacer clic en el botón Enviar, el CSS cambiará de myDIV CSS a myDIV: hover CSS.
html
<!DOCTYPE html>
<html>
<head>
<!--this style tag defines two CSS
the first one is the CSS define for
the button whose id is myDiv. first
css will show when the page is load.
second css is used when someone
hover the mouse on the Div -->
<style>
#myDIV {
border: 1px solid black;
background-color: #0f9d58;
width: 220px;
height: 100;
}
#myDIV:hover {
background-color: #228B22;
width: 500px;
}
</style>
</head>
<body>
<center>
<div id="myDIV">
<h1>GeeksForGeeks</h1>
</div>
<button onclick="myFunction()">submit</button>
<script>
// this function will find a button whose id
// is myDIV and assign its new css according
// to the css define in css section
function myFunction() {
document.getElementById(
"myDIV").style.WebkitTransition = "width 3s";
// here all means that the transition
// is used for all property.
// 2s means that hover effect will complete
// in 2s its the transaction duration time.
document.getElementById(
"myDIV").style.transition = "width 3s";
}
</script>
</center>
</body>
</html>
Producción:
- Antes de pasar el mouse:
- Mientras pasa el mouse después de hacer clic en enviar:
Tenga en cuenta que la duración de la transición solo puede ser un número no negativo y no puede ser cero; de lo contrario, no se mostrará el efecto de la transacción.
En lugar de todo, podemos usar las siguientes propiedades css:
- ninguno: ninguna propiedad obtiene el efecto de transacción
- all: este es el valor predeterminado todas las propiedades obtendrán el efecto de transacción.
- initial: establece esta propiedad en su valor predeterminado.
- heredar: hereda esta propiedad de su elemento principal.
Navegadores compatibles: El navegador compatible con HTML | Las propiedades de transición de estilo DOM se enumeran a continuación:
- Google Chrome 26 y superior
- Borde 12 y superior
- Firefox 16 y superior
- Internet Explorer 10 y superior
- Ópera 12.1 y superior
- Apple Safari 9 y superior
Publicación traducida automáticamente
Artículo escrito por Shahnawaz_Ali y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA