Cómo escribir a una Div desde JavaScript

Escrito por allen bethea Google | Traducido por jane laury
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo escribir a una Div desde JavaScript
Los métodos de JavaScript pueden acceder y modificar los divs en HTML. (Stockbyte/Stockbyte/Getty Images)

El lenguaje JavaScript permite a los desarrolladores de sitios de Internet inspeccionar y modificar la estructura oculta de una página web. JavaScript tiene métodos para acceder al Modelo de objetos del documento o DOM (por sus siglas en inglés), la interfaz de programación de aplicaciones del lenguaje de marcado de hipertexto. El método getElementById() de JavaScript permite al programador inspeccionar, modificar y agregar etiquetas HTML y darle estilo a la información. La mayoría de las propiedades y atributos de las hojas de estilo pueden ser modificadas, incluyendo fondos, fuentes, bordes, anchos y posicionamiento. Las etiquetas HTML deben estar etiquetadas con un identificador para que el método getElementById () pueda encontrarlas y acceder a estas.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Necesitarás

  • Editor de texto sin formato

Lista completaMinimizar

Instrucciones

  1. 1

    Ejecuta la aplicación estándar de edición de texto sin formato en tu computadora.

  2. 2

    Ingresa el siguiente código en el editor de texto:

    <html> <head> <style type="text/css"><!--

    outer {

    background-color:yellow; }

    inner {

    width:200px; height:40px; background-color:red; color:white; font-size:15px; padding:10px;

    } --></style>

    <script language="javascript"> function changeDiv(){ document.getElementById("inner").style.width = "400px"; document.getElementById("inner").style.height = "400px"; document.getElementById("inner").style.fontSize = "62px"; document.getElementById("inner").style.textAlign = "center"; document.getElementById("inner").style.backgroundColor = "#FFB3B3"; document.getElementById("inner").style.color = "black"; document.getElementById("inner").innerHTML="JavaScript can Change many properties of a Div"; } </script> </head>

    <body id="outer"> <div id="inner" onClick="changeDiv()">Click in red box to change the div </div> </body> </html>

  3. 3

    Haz clic en "Archivo" y "Guardar". Utiliza el nombre de archivo "test.html".

  4. 4

    Abre tu navegador. Haz clic en "Archivo" y "Abrir archivo".

  5. 5

    Ubica el documento "test.html" que has creado y haz clic en "Abrir".

  6. 6

    Haz clic sobre el texto dentro del fondo azul para cambiar los márgenes del cuadro.

Consejos y advertencias

  • El método DOM "getElementsByTagName()" de JavaScript permite a un programador cambiar todas las instancias de una etiqueta HTML en particular en un documento a la vez. El método "getElementsByTagName()" se le da al nombre de una etiqueta HTML como un parámetro, tal como "p" para párrafo: "h1" para un encabezado 1, o "div" para una división de página, y devuelve una matriz que contiene todas las apariciones de esa etiqueta en el documento. Por ejemplo, si un documento contiene cinco párrafos etiquetados con "", getElementsByTagName("p") devuelve una matriz con cinco elementos. El siguiente código ilustra esto cambiando el color del texto de todos los "" o elementos de párrafo en la página web:
  • function changePs(){
  • var x=document.getElementsByTagName("p");
  • for (i=-0; i
  • x[i].style.color = '#D2691E';
  • }
  • here am i
  • here am i
  • here am i
  • here am i
  • here am i
  • here am i
  • La mayoría de los navegadores muestran el HTML válido y el código CSS de manera diferente. Incluso las versiones distintas de un mismo navegador pueden producir problemas de visualización inesperados. Prueba siempre el código en distintos navegadores y versiones anteriores del mismo navegador para asegurarte de que el código funciona como esperabas.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles