Criando um objeto Javascript

Agora iremos criar um botão igual a imagem acima:

Arquivo: exemplo.html
<html>
<head>
<title>Objeto Javascript</title>
</head>
<body>
<script language="javascript">
    function objeto_botao(seletor) {

   /*
   =======================================
    Objeto:
   =======================================
   */
        document.write("<span id=\'" + seletor + "\' style='border-style: outset;cursor: pointer; font-family: Arial; position: absolute;' onmousedown='style.borderStyle=\"inset\"' onmouseup='style.borderStyle=\"outset\"' >teste</span>");

   /*
   =======================================
    Evento:
   =======================================
   */

        window.onload = function (){
            document.getElementById(seletor).onclick = eventoOnClick;
        }

   /*
   =======================================
    Métodos:
   =======================================
   */

        this.Cor_de_fundo = function(cor) {
            document.getElementById(seletor).style.backgroundColor = cor;
            this.Cor_de_fundo = cor;
        }

        this.Texto = function(texto) {
            document.getElementById(seletor).innerHTML = texto;
            this.Texto = texto;
        }

        this.Altura = function(altura) {
            document.getElementById(seletor).style.height = altura;
            this.Altura = altura;
        }

        this.Largura = function(largura) {
            document.getElementById(seletor).style.width = largura;
            this.Largura = largura;
        }

        this.Topo = function(topo) {
            document.getElementById(seletor).style.top = topo;
            this.Topo = topo;
        }

        this.Esquerda = function(esquerda) {
            document.getElementById(seletor).style.left = esquerda;
            this.Esquerda = esquerda;
        }

        this.Fonte = function(fonte) {
            document.getElementById(seletor).style.fontFamily = fonte;
            this.Fonte = fonte;
        }

        this.Negrito = function(negrito) {
            if (negrito == true) {
                document.getElementById(seletor).style.fontWeight = "bold";
            } else {
                document.getElementById(seletor).style.fontWeight = "normal";
            }
            this.Negrito = negrito;
        }

        this.Italico = function(italico) {
            if (italico == true) {
                document.getElementById(seletor).style.fontStyle = "italic";
            } else {
                document.getElementById(seletor).style.fontStyle = "normal";
            }
            this.Italico = italico;
        }

        this.Sublinhado = function(sublinhado) {
            if (sublinhado == true) {
                document.getElementById(seletor).style.textDecoration = "underline";
            } else {
                document.getElementById(seletor).style.textDecoration = "none";
            }
            this.Sublinhado = sublinhado;
        }

        this.Tamanho_da_fonte = function(tamanho) {
            document.getElementById(seletor).style.fontSize = tamanho;
            this.Tamanho_da_fonte = tamanho;
        }

        this.Cor_da_fonte = function(colour) {
            document.getElementById(seletor).style.color = colour;
            this.Cor_da_fonte = colour;
        }

        this.Alinhamento = function(alinhamento) {
            document.getElementById(seletor).style.textAlign = alinhamento;
            this.Alinhamento = alinhamento;
        }
    }
</script>
<form name="form1">
    <input type="text" name="texto">
    <br>
    <br>
    <script language="javascript">
   /*
   =======================================
    Objeto: Botao1
   =======================================
   */
        botao1 = new objeto_botao("botao1");

        botao1.Texto("Botão 1");
        botao1.Altura(30);
        botao1.Largura(100);
        botao1.Topo(10);
        botao1.Esquerda(200);
        botao1.Fonte("Times New Roman");
        botao1.Negrito(true);
        botao1.Italico(false);
        botao1.Sublinhado(false);
        botao1.Tamanho_da_fonte(20);
        botao1.Cor_da_fonte("green");               
        botao1.Cor_de_fundo("yellow");
        botao1.Alinhamento("center");
   /*
   =======================================
    Evento do Objeto: Botao1
   =======================================
   */
        function eventoOnClick() {
            if (document.form1.texto.value == "teste") {
                document.form1.texto.value = "TESTE"
            } else {
                document.form1.texto.value = "teste"
            }
        }
   /*
   =======================================
    Atributos do Objeto: Botao1
   =======================================
   */
document.write("<br>");
        document.write(botao1.Texto + "<br>");
        document.write(botao1.Altura + "<br>");
        document.write(botao1.Largura + "<br>");
        document.write(botao1.Topo + "<br>");
        document.write(botao1.Esquerda + "<br>");
        document.write(botao1.Fonte + "<br>");
        document.write(botao1.Negrito + "<br>");
        document.write(botao1.Italico + "<br>");
        document.write(botao1.Sublinhado + "<br>");
        document.write(botao1.Tamanho_da_fonte + "<br>");
        document.write(botao1.Cor_da_fonte + "<br>");
        document.write(botao1.Cor_de_fundo + "<br>");
        document.write(botao1.Alinhamento + "<br>");
    </script>
</form>
</body>
</html>