Embedded Files
Style en Document Object Model (DOM)
Seleccionar Elementos
document.getElementById("idt1");
Cambiar el Valor de un atributo o propiedad de un elemento.
elemento.atributo
Los elementos de HTML tienen atributos que, por lo general, no asignamos explícitamente, pero que existen con valores predeterminados. En el siguiente elemento
<u id="idt1">Elemento 1</u>
El atributo style no está definido, pero tiene un valor por defecto. Aunque no se vea en el código, está presente y puede modificarse mediante comandos de JavaScript.
<u id="idt1">Elemento 1</u>
<script>
var elem1 = document.getElementById("idt1");
elem1.style = "color:purple;background:pink";
elem1.textContent = "ELEMENTO UNO";
</script>
Atributos y propiedades básicas.
style: Obtiene o establece el estilo del elemento.
textContent: Obtiene o establece el contenido textual del elemento.
innerHTML: Obtiene o establece el contenido HTML del elemento.
Ejemplo:
<html>
<head>
<title>Menú del Restaurante</title>
</head>
<body>
<h1>Título</h1>
<h1 id="idt1">Título</h1>
<h2>Título secundario</h2>
<h2 id="idt2">Título secundario</h2>
<i id="idt3">Inclinada</i>
<u id="idt4">Subrayada</u>
<a id="idt5" href="https://www.google.com" >Enlace</a>
<script>
var elem1 = document.getElementById("idt1");
var elem2 = document.getElementById("idt2");
var elem3 = document.getElementById("idt3");
var elem4 = document.getElementById("idt4");
var elem5 = document.getElementById("idt5");
var estilo1 = "color:purple;background:pink";
var estilo2 = "color:white;background:blue";
elem1.style = estilo1;
elem2.style = estilo2;
elem3.style = estilo1;
elem4.style = estilo2;
elem5.style = estilo1;
elem1.textContent = "TITULO PRINCIPAL";
elem2.textContent = "TITULO SECUNDARIO";
elem3.textContent ="TEXTO INCLINADO";
elem4.textContent = "TEXTO SUBRAYADO";
elem5.textContent = "ENLACE A GOOGLE";
</script>
</body>
</html>
Actividad 3.3A
Crea una nueva página HTML como el ejemplo anterior con el nombre "Act33A",
Dentro de la etiqueta <body>, agrega los siguientes elementos:
<h1>Act33A</h1>
<h2 id="idt1">Título secundario</h2>
<h3 id="idt2">Título terciario</h3>
Agregar el siguiente código dentro de la etiqueta <script>:
var elem1=document.getElementById("idt1");
var elem2=document.getElementById("idt2");
var estilo1 = "color:darkslateblue;background: lavender";
var estilo2 = "color:white;background:midnightblue";
elem1.style = estilo1;
elem2.style = estilo2;
elem1.textContent = "JOSE ANTONIO GALAN";
elem2.textContent = "PEREIRA"
Actividad 3.3B
Crea una nueva página HTML como el ejemplo anterior con el nombre "Act33B",
Dentro de la etiqueta <body>, agrega los siguientes elementos:
<h3 id="titulo">Título</h3>
<a id="hyper" href="www.google.com">Google</a>
<img id="imagen" src="https://lc.cx/PzuuX4" width="30" height="60">
Agregar el siguiente código dentro de la etiqueta <script>:
var elem1=document.getElementById("titulo");
var elem2=document.getElementById("hyper");
var elem3=document.getElementById("imagen");
var estilo = "color: white;background:midnightblue";
elem1.style = estilo;
elem1.textContent = "PAGINA GALANISTA";
elem2.href="https://www.tiktok.com";
elem2.textContent ="ENLACE A TIKTOK";
elem3.width = 100;
elem3.height = 300;
Page updated
Report abuse