Conceptos de DHTML

Las propiedades de estilo CSS de una marca HTML se pueden modificar luego que la página se cargó en el navegador.

Debemos tener en cuenta que para acceder a los estilos, los nombres de las propiedades tienen un ligero cambio, esto es debido a que el caracter '-' no está permitido en JavaScript para la definición de una variable. Luego, a todas las propiedades debemos sacarle el guión.

Una propiedad llamada:

  font-size:10px;

Luego desde JavaScript la debemos invocar como:

  puntero.style.fontSize='60px';

Siendo puntero una referencia a un nodo.

Otros ejemplos de acceso a las propiedades CSS:

puntero.stype.zIndex=100;
puntero.style.display='none';
puntero.fontWeight='bold';
puntero.fontFamily='verdana';

Así para el resto de las propiedades CSS.
Para ver su funcionamiento definiremos un párrafo y luego mediante distintos controles select modificaremos las propiedades de: 'Color de fondo', 'Color de fuente', 'Cambiar tamaño de fuente', 'Cambiar tipo de fuente', 'Cambiar estilo de la fuente', 'Peso de la fuente', 'Alineación de la fuente', 'Decoración de la fuente', 'Espacio entre letras', 'Espacio entre palabras', 'Transformación de texto', 'Ancho de borde', 'Estilo de borde', 'Color de borde', 'padding' y 'margin'.
pagina.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
    <link rel="stylesheet" href="estilos.css">
</head>

<body>
    <p id="recuadro">Quién descubrió América y en que año fue?</p>
    Color de fondo:
    <select onChange="cambiarColorFondo()" id="colorfondo">
    <option value="#ffff00">amarillo</option>
    <option value="#ff0000">rojo</option>
    <option value="#00ff00">verde</option>
    <option value="#0000ff">azul</option>
    </select>
    <br> Color de fuente:
    <select onChange="cambiarColorFuente()" id="colorfuente">
    <option value="#000000">negro</option>
    <option value="#ff0000">rojo</option>
    <option value="#00ff00">verde</option>
    <option value="#0000ff">azul</option>
    </select>
    <br> Cambiar tamaño de fuente:
    <select onChange="cambiarTamanoFuente()" id="tamanofuente">
    <option value="10px">10</option>
    <option value="12px">12</option>
    <option value="14px">14</option>
    <option value="16px">16</option>
    <option value="18px">18</option>
    <option value="20px">20</option>
    <option value="22px">22</option>
    <option value="24px">24</option>
    </select>
    <br> Cambiar tipo de fuente:
    <select onChange="cambiarTipoFuente()" id="tipofuente">
    <option value="Arial">Arial</option>
    <option value="Courier">Curier</option>
    <option value="Verdana">Verdana</option>
    </select>
    <br> Cambiar estilo de la fuente:
    <select onChange="cambiarEstiloFuente()" id="estilofuente">
    <option value="normal">Normal</option>
    <option value="Italic">Italic</option>
    <option value="Oblique">Oblique</option>
    </select>
    <br> Peso de la fuente:
    <select onChange="cambiarPesoFuente()" id="pesofuente">
    <option value="normal">Normal</option>
    <option value="bold">Bold</option>
    </select>
    <br> Alineación de la fuente:
    <select onChange="cambiarAlineacionFuente()" id="alineacionfuente">
    <option value="left">Left</option>
    <option value="right">Right</option>
    <option value="center">Center</option>
    </select>
    <br> Decoración de la fuente:
    <select onChange="cambiarDecoracionFuente()" id="decoracionfuente">
    <option value="none">none</option>
    <option value="underline">underline</option>
    <option value="overline">overline</option>
    <option value="line-through">line-through</option>
    </select>
    <br> Espacio entre letras:
    <select onChange="cambiarEspacioLetras()" id="espacioletras">
    <option value="3">3</option>
    <option value="6">6</option>
    <option value="9">9</option>
    <option value="12">12</option>
    <option value="15">15</option>
    </select>
    <br> Espacio entre palabras:
    <select onChange="cambiarEspacioPalabras()" id="espaciopalabras">
    <option value="3">3</option>
    <option value="6">6</option>
    <option value="9">9</option>
    <option value="12">12</option>
    <option value="15">15</option>
    </select>
    <br> Transformación de texto:
    <select onChange="cambiarTransformacionTexto()" id="transformaciontexto">
    <option value="none">none</option>
    <option value="capitalize">capitalize</option>
    <option value="lowercase">lowercase</option>
    <option value="uppercase">uppercase</option>
    </select>
    <br> Ancho de borde:
    <select onChange="cambiarAnchoBorde()" id="anchoborde">
    <option value="0px">0</option>
    <option value="1px" selected="selected">1</option>
    <option value="2px">2</option>
    <option value="3px">3</option>
    <option value="4px">4</option>
    <option value="5px">5</option>
    </select>
    <br> Estilo de borde:
    <select onChange="cambiarEstiloBorde()" id="estiloborde">
    <option value="none">none</option>
    <option value="hidden">hidden</option>
    <option value="dotted">dotted</option>
    <option value="dashed">dashed</option>
    <option value="solid">solid</option>
    <option value="double">double</option>
    <option value="groove">groove</option>
    <option value="ridge">ridge</option>
    <option value="inset">inset</option>
    <option value="outset">outset</option>
    </select>
    <br> Color de borde:
    <select onChange="cambiarColorBorde()" id="colorborde">
    <option value="#000000">negro</option>
    <option value="#ffff00">amarillo</option>
    <option value="#ff0000">rojo</option>
    <option value="#00ff00">verde</option>
    <option value="#0000ff">azul</option>
    </select>
    <br> padding:
    <select onChange="cambiarPadding()" id="padding">
    <option value="0">0</option>
    <option value="4" selected="selected">4</option>
    <option value="8">8</option>
    <option value="12">12</option>
    <option value="16">16</option>
    <option value="20">20</option>
    </select>
    <br> margin:
    <select onChange="cambiarMargin()" id="margin">
    <option value="0">0</option>
    <option value="4" selected="selected">4</option>
    <option value="8">8</option>
    <option value="12">12</option>
    <option value="16">16</option>
    <option value="20">20</option>
    </select>
    <script src="funciones.js"></script>
</body>

</html>

estilos.css

#recuadro {
    background-color: #ffff00;
    border: 1px solid #000000;
    font-size: 10px;
}

funciones.js

function cambiarColorFondo() {
    let pun = document.getElementById('colorfondo')
    let punrec = document.getElementById('recuadro')
    punrec.style.backgroundColor = pun.value
}

function cambiarColorFuente() {
    let pun = document.getElementById('colorfuente')
    let punrec = document.getElementById('recuadro')
    punrec.style.color = pun.value
}

function cambiarTamanoFuente() {
    let pun = document.getElementById('tamanofuente')
    let punrec = document.getElementById('recuadro')
    punrec.style.fontSize = pun.value
}

function cambiarTipoFuente() {
    let pun = document.getElementById('tipofuente')
    let punrec = document.getElementById('recuadro')
    punrec.style.fontFamily = pun.value
}

function cambiarEstiloFuente() {
    let pun = document.getElementById('estilofuente')
    let punrec = document.getElementById('recuadro')
    punrec.style.fontStyle = pun.value
}

function cambiarPesoFuente() {
    let pun = document.getElementById('pesofuente')
    let punrec = document.getElementById('recuadro')
    punrec.style.fontWeight = pun.value
}

function cambiarAlineacionFuente() {
    let pun = document.getElementById('alineacionfuente')
    let punrec = document.getElementById('recuadro')
    punrec.style.textAlign = pun.value
}

function cambiarDecoracionFuente() {
    let pun = document.getElementById('decoracionfuente')
    let punrec = document.getElementById('recuadro')
    punrec.style.textDecoration = pun.value
}

function cambiarEspacioLetras() {
    let pun = document.getElementById('espacioletras')
    let punrec = document.getElementById('recuadro')
    punrec.style.letterSpacing = pun.value + "px"
}

function cambiarEspacioPalabras() {
    let pun = document.getElementById('espaciopalabras')
    let punrec = document.getElementById('recuadro')
    punrec.style.wordSpacing = pun.value + "px"
}

function cambiarTransformacionTexto() {
    let pun = document.getElementById('transformaciontexto')
    let punrec = document.getElementById('recuadro')
    punrec.style.textTransform = pun.value
}

function cambiarAnchoBorde() {
    let pun = document.getElementById('anchoborde')
    let punrec = document.getElementById('recuadro')
    punrec.style.borderWidth = pun.value
}

function cambiarEstiloBorde() {
    let pun = document.getElementById('estiloborde')
    let punrec = document.getElementById('recuadro')
    punrec.style.borderStyle = pun.value
}

function cambiarColorBorde() {
    let pun = document.getElementById('colorborde')
    let punrec = document.getElementById('recuadro')
    punrec.style.borderColor = pun.value
}

function cambiarPadding() {
    let pun = document.getElementById('padding')
    let punrec = document.getElementById('recuadro')
    punrec.style.padding = pun.value + "px"
}

function cambiarMargin() {
    let pun = document.getElementById('margin')
    let punrec = document.getElementById('recuadro')
    punrec.style.margin = pun.value + "px"
}

Primero obtenemos una referencia al control select:

    let pun = document.getElementById('colorfondo')

Luego obtenemos una referencia al párrafo:

    let punrec = document.getElementById('recuadro')

Por último, mediante la referencia al párrafo, accedemos a la propiedad style y mediante ésta, a la propiedad CSS respectiva, mediante la propiedad value del select extraemos el valor seleccionado:

    punrec.style.backgroundColor = pun.value

23 - Accediendo al estilo de una marca HTML.

Retornar