Etiqueta Personalizada HTML5

Este articulo necesita una revisión técnica. Cómo puedes ayudar.

Este articulo necesita una revisión editorial. Cómo puedes ayudar.

Una etiqueta personalizada sencilla, es crear una plantilla de elementos.

Un sencillo ejemplo donde con poner la etiqueta <corazon> nos muetra un corazon en el documento:

corazon.js

Contenido JavaScript

function ini(){
document.createElement('corazon');//creamos el elemento corazon
var corazon = document.getElementsByTagName('corazon');//llamamos todos los elemento corazon del documento
  var i;
  for (i = 0; i < corazon.length; i++) {//ejecuta acciones para esos elementos
//creamos estilos para nuetras etiquetas
    corazon[i].style.backgroundImage= "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACaElEQVR4nO2by7WCMBCGKYECyJgSLIESLCEnwT0l0IElWIIlWIIlsAxhkxLuXZh45YrKI+QF/zmznvn+TAYYj0myadOmTSMkMUl5VuQN0JIDrVooTmLHLhxoxRElPCtyjgk2nZdjgnlW5BxRcs/Lzi2wMwdaNUBLnhW56ZzdArIib4GdBTApgP0MiBtHlMzJKTFJBWIHAew2MOdPC+wsEDsYwlbgiF2HFtBfVHEaC95CcRphdu8BtPi4nwz+VMRk8H9RDymoxcf9mBMf0hGT4MWOXQzCP6IBWr7L2wAtZ576226QmKSD4DkmWACrl4D/dCocaLVkTgFMfh3OEpN07n0fHE+DiiNKrOQEVn80QE15G4XcOwEf9+rOL9H2/TkRu/bCq8eNNXgVUhgceEPj5fEsMUldFOIwZMcANX1dF2W3C4BWf3ff1uDzK+5doIaQ62LcdAEmeJXtr6MBWiZLvfEFETt2Wev911EnYuHXXs9DJsLiW5iPsfYOqNc+A27WP4B8ihaxa2J46xNUtFCc9IeQ82JcxGOTLNY5CG9Pi5D1XYPO16C6BmvqAvmyJLW4l3MendPvrMXWsRV6vyJXVyHmV2P59ccZ9btAjCZ8h388FeLbEsnRP5hGZMJ4+IhMmA4fgQnz4QM2wRx8gCaYhw/IhOXgAzBheXiPTbAH76EJ9uE9MsEdvAcmuIfXcmCCP/BaFk3wD17Lggn+wmstaIL/8FoLmBAOvJZBE8KD1zJgQrjwWjNMCB9ea4IJ8cBrjTAhPnitASbEC6/1wYT44bV6TFgPvBbHBHOgFQdazfpz06ZNmzbN0C97EM/d8hW+4gAAAABJRU5ErkJggg==')";
    corazon[i].style.position="relative";
    corazon[i].style.display="block";
    corazon[i].style.width="64px";
    corazon[i].style.height="64px";
  }
}
window.addEventListener('load',ini,false);//ejecuta la funcion ini al cargar el documento

Ahora solo llamamos a nuestro archivo corazon.js desde nuetro html y podremos usar libremente nuetra etiqueta <corazon> con la cual nos mostrara un corazon.

index.html

Contenido HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mi Etiqueta</title>
    <script src="corazon.js"  type="text/javascript"></script>
  </head>
  <body>
    <corazon></corazon>
  </body>
</html>

 

Etiquetas y colaboradores del documento

 Colaboradores en esta página: Lazaro
 Última actualización por: Lazaro,