ubiquitour.com

Cómo mover un DIV en otro DIV en CSS

Parte de la magia de navegar por Internet viene de ver efectos especiales que generan sitios Web. Desarrolladores construcción páginas Web utilizando bloques de construcción; en el lenguaje de marcado HTML, estos bloques se llaman "div". Un div puede contener texto, imágenes, menús y otros elementos HTML. Cuando una página muestra una barra lateral a la izquierda, contenido en el medio y una barra lateral a la derecha, probablemente consiste en tres bloques div formato ese contenido. Mediante la manipulación de div, puede mover uno dentro de otro y crear una variedad de efectos útiles y entretenidas.

Instrucciones

1 Inicie Bloc de notas o cualquier editor de HTML.

2 Abra uno de los documentos HTML y pegar este código en cualquier lugar en la sección "body" del documento:

< div id = "div1" class = "verde" >

div 1

< / div >

< div id = "div2" class = "amarillo" >

DIV2

< / div >

< id entrada = "Button1" type = "button" value = "Mover el Div" onclick = "return moveDiv()" / >

Esto crea dos elementos div. El primer div, cuyo ID es "div1", hace referencia a una clase CSS llamada "verde" mientras que el segundo div--"div2"--se refiere a una clase denominada "amarillo." En la última línea el botón llama a la función JavaScript que se mueve el primer div en el segundo div "moveDiv"

3 Pegue este código en la sección "head" del documento:

< estilo tipo = "text/css" >

.Yellow {fondo-color: amarillo;}

.Green {fondo-color: verde, ancho: 50px;}

< / estilo >

Estas son las clases de "amarillas" y "verdes" hace referencia alfabéticas los elementos div. Cada uno crea un color de fondo diferente para el div contenedor que llama.

4 Agregue el siguiente código de JavaScript por debajo de la etiqueta de cierre "estilo" en el documento:

< script language = "javascript" type = "texto/javascript" >

var divToMove = "div1";

var targetDiv = "div2";

función moveDiv() {}

div1 var = document.getElementById(divToMove);

div2 var = document.getElementById(targetDiv);

DIV2.AppendChild(DIV1);

}

< /script >

La función de "moveDiv" obtiene una referencia a la primera div y mueve en el segundo div ejecutando el método "appendChild". Este útil método de JavaScript le permite colocar elementos div y agregar a nuevo hijo div elementos a los ya existentes.

5 Guardar tu documento HTML editada y verlo en un navegador. Usted verá un div verde corto (div1) en la primera línea y un div tiempo amarillo (div2) en la segunda línea.

6 Haga clic en el botón de "Mover el Div". Cuando se ejecuta el código JavaScript, que mueve la primera div en el segundo. Debido a los elementos div tienen diferentes colores, puede ver que "div1" está dentro "div2."

Consejos y advertencias

  • Este ejemplo establece los valores de "divToMove" y "targetDiv" al principio del bloque de código JavaScript. Usted probablemente querrá quitar esas dos líneas de código y modificar la definición de función, por lo que aparece como sigue: function moveDiv (divToMove, targetDiv). Esto permite otras funciones en el código para llamar a la función y pasar a través de esos dos parámetros.
  • Recuerde que los envases div pueden contener cualquier elemento HTML, incluyendo una imagen. Por ejemplo, podría causar una imagen de repente aparecer dentro de un bloque de párrafo más abajo en la página simplemente moviendo el div de la imagen en el div que contiene el párrafo.