Accediendo al estilo de una marca HTML.

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'.

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script src="funciones24.js"></script>
<link rel="StyleSheet" href="estilos24.css" type="text/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><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><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><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><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><br>
Peso de la fuente:
<select onChange="cambiarPesoFuente()" id="pesofuente">
<option value="normal">Normal</option>
<option value="bold">Bold</option>
</select>
<br><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><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><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><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><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><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><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><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><br>
</body>
</html>

Ver ejemplo anterior

El archivo de estilos CSS :estilos24.css

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

El archivo de javascript JS : funciones24.js

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

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

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

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

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

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

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

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



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

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

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

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

Primero obtenemos una referencia al control select:

var pun=document.getElementById('colorfondo');

Luego obtenemos una referencia al párrafo:

var 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;

(adsbygoogle = window.adsbygoogle || []).push({});

Accediendo al estilo de una marca HTML.