Buenas, como podréis ver si ejecutáis el programa, se trata de un texto en el cual podemos modificar básicamente el color, texto, etc. No obstante, el añadir border radious y poner espacio entre palabras no funciona. Puede ser que la referencia del CSS en JS este mal, ya que no se nombran igual al no tener - Ejemplo:(font-size, fontSize
)
HTML
<!doctype html>
<html>
<head>
<script src="DH16.js"></script>
<link rel="StyleSheet" href="DH16.css" type="text/css">
</head>
<body>
<p id="principal">
Modifique este texto a su gusto
</p>
<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>
Color de fondo:
<select onChange="cambiarColorDeFondo()" id="colorfondo">
<option value="#ffff00">Amarillo</option>
<option value="#ff0000">Rojo</option>
<option value="#00ff00">Verde</option>
<option value="#0000ff">Azul</option>
</select>
<br>
Tamaño de fuente:
<select onChange="cambiarTamano()" id="cambiartamano">
<option value="1px">1px</option>
<option value="5px">5px</option>
<option value="10px">10px</option>
<option value="15px">15px</option>
<option value="20px">20px</option>
<option value="30px">30px</option>
<option value="40px">40px</option>
</select>
<br>
Tipo de fuente:
<select onChange="cambiarFuente()" id="cambiarfuente">
<option value="Verdana">Verdana</option>
<option value="Arial">Arial</option>
<option value="Courier">Courier</option>
</select>
<br>
Estilo de fuente:
<select onChange="estiloDeFuente()" id="estilofuente">
<option value="normal">Normal</option>
<option value="Oblique">Oblique</option>
<option value="Italic">Italic</option>
</select>
<br>
Alineacion de texto:
<select onChange="alineacion()" id="alineacion">
<option value="center">Centrado</option>
<option value="right">Derecha</option>
<option value="left">Izquierda</option>
</select>
<br>
Decoracion de texto:
<select onChange="decoracion()" id="decoracion">
<option value="none">Ninguno</option>
<option value="underline">Subrallado</option>
<option value="overline">Subrallado superior</option>
<option value="line-through">Tachado</option>
</select>
<br>
Peso de la fuente:
<select onChange="pesoFuente()" id="peso">
<option value="normal">Normal</option>
<option value="bold">Negrita</option>
</select>
<br>
Espacio entre palabras:
<select onChange="espacioPalabras()" id="ep">
<option value="3">3</option>
<option value="6">6</option>
<option value="9">9</option>
<option value="12">12</option>
</select>
<br>
Transformacion de texto:
<select onChange="transformacionTexto()" id="transformacion">
<option value="uppercase">Mayusculas</option>
<option value="lowercase">Minusculas</option>
<option value="none">Ninguno</option>
</select>
<br>
Ancho del borde:
<select Onchange="anchoDeBorde()" id="anchoborde">
<option value="0px">0</option>
<option value="1px">1</option>
<option value="2px">2</option>
<option value="3px">3</option>
<option value="4px">4</option>
<option value="5px">5</option>
<option value="6px">6</option>
<option value="7px">7</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>
<br>
Bordeado redondo:
<select onChange="borderRadious()" id="radious">
<option value="0px">0</option>
<option value="1px">1</option>
<option value="2px">2</option>
<option value="3px">3</option>
</body>
</html>
JavaScript
function cambiarColorFuente(){
var principal=document.getElementById('principal');
var cf=document.getElementById('colorfuente');
principal.style.color=cf.value;
}
function cambiarColorDeFondo(){
var principal=document.getElementById('principal');
var cdf=document.getElementById('colorfondo');
principal.style.backgroundColor=cdf.value;
}
function cambiarTamano(){
var principal=document.getElementById('principal');
var ct=document.getElementById('cambiartamano');
principal.style.fontSize=ct.value;
}
function cambiarFuente(){
var principal=document.getElementById('principal');
var cff=document.getElementById('cambiarfuente');
principal.style.fontFamily=cff.value;
}
function estiloDeFuente(){
var principal=document.getElementById('principal');
var edf=document.getElementById('estilofuente');
principal.style.fontStyle=edf.value;
}
function alineacion(){
var principal=document.getElementById('principal');
var a=document.getElementById('alineacion');
principal.style.textAlign=a.value;
}
function decoracion(){
var principal=document.getElementById('principal');
var d=document.getElementById('decoracion');
principal.style.textDecoration=d.value;
}
function pesoFuente(){
var principal=document.getElementById('principal');
var p=document.getElementById('peso');
principal.style.fontWeight=p.value;
}
function espacioPalabras(){
var principal=document.getElementById('principal');
var ep=document.getElementById('ep');
principal.style.wordSpacing=ep.value;
}
function transformacionTexto(){
var principal=document.getElementById('principal');
var t=document.getElementById('transformacion');
principal.style.textTransform=t.value;
}
function anchoDeBorde(){
var principal=document.getElementById('principal');
var adb=document.getElementById('anchoborde');
principal.style.borderWidth=adb.value;
}
function cambiarEstiloBorde(){
var principal=document.getElementById('principal');
var ceb=document.getElementById('estiloborde');
principal.style.borderStyle=ceb.value;
}
function cambiarColorBorde(){
var principal=document.getElementById('principal');
var ccb=document.getElementById('colorborde');
principal.style.borderColor=ccb.value;
}
function cambiarPadding(){
var principal=document.getElementById('principal');
var cp=document.getElementById('padding');
principal.style.padding=cp.value;
}
function cambiarMargin(){
var principal=document.getElementById('principal');
var cm=document.getElementById('margin');
principal.style.margin=cm.value;
}
function borderRadious(){
var principal=document.getElementById('principal');
var br=document.getElementById('radious');
principal.style.borderRadious=br.value;
}
CSS
#principal {
font-size:15px;
border:1px solid #000000;
background-color: #ffff00;
}