La propiedad de orden de estilo DOM especifica el orden de un elemento flexible en relación con el resto de los elementos flexibles dentro del mismo elemento contenedor.
Sintaxis:
- Para establecer la propiedad:
object.style.order = "number | initial | inherit"
- Para obtener la propiedad:
object.style.order
Valores devueltos: Devuelve un String, valor que representa la propiedad de orden de un elemento
Valores de propiedad:
- Número: especifica el orden del elemento flexible. Valor predeterminado 0.
- Inicial: establece la propiedad en su valor predeterminado.
- Heredar: hereda la propiedad de su elemento padre.
Ejemplo:
html
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style order Property
</title>
<style>
#main {
width: 180px;
height: 90px;
border: 1px solid #000000;
display: flex;
}
#main div {
width: 90px;
height: 90px;
}
</style>
</head>
<body>
<!-- two div with different color. -->
<div id="main">
<div style="background-color:black;"
id="black"></div>
<div style="background-color:white;"
id="white">I am white.</div>
</div>
<p>Click the button below to change
the order of the four DIV's:</p>
<button onclick="myFunction()">CLICK</button>
<!-- Change order of div -->
<script>
function myFunction() {
document.getElementById(
"black").style.order = "2";
document.getElementById(
"white").style.order = "1";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Navegador compatible: El navegador compatible con HTML | Las propiedades de orden de estilo DOM se enumeran a continuación:
- Google Chrome 29 y superior
- Borde 12 y superior
- Internet Explorer 11.0 y superior
- Firefox 20 y superior
- Ópera 12.1 y superior
- Safari 9 y superior
Publicación traducida automáticamente
Artículo escrito por shivangsharma15 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA