2

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

3 respuestas 3

2

te faltaba agregar px en algunas partes del código y en el js es borderRadius, y tu escribes borderRadious he aquí el código ya modificado:
JS

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.borderRadius=br.value;
}

Y el html

<!doctype html>
<html>
<head>

</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="3px">3</option>
     <option value="6px">6</option>
     <option value="9px">9</option>
     <option value="12px">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="0px">0</option>
<option value="4px" selected="selected">4</option>
<option value="8px">8</option>
<option value="12px">12</option>
<option value="16px">16</option>
<option value="20px">20</option>
</select>
<br>
margin:
<select onChange="cambiarMargin()" id="margin">
<option value="0px">0</option>
<option value="4px" selected="selected">4</option>
<option value="8px">8</option>
<option value="12px">12</option>
<option value="16px">16</option>
<option value="20px">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>

Espero que te sirva saludos

1
  • @Vendetta wordSpacing es espacio entre palabras y funciona en el ejemplo, para crear un espacio entre las letra usa letterSpacing = "5px" por ejemplo
    – Kevin
    Commented el 8 ago. 2017 a las 19:11
2

Escribiste el nombre mal. En vez de borderRadious deberia de ser borderRadius(sin la o). y tienes que especificarle px a wordSpacing.

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 + "px";
}

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.borderRadius=br.value;
}
#principal {
  font-size:15px;
  border:1px solid #000000;
  background-color: #ffff00;
}
<!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>

0

Hola puedes usar esto:

document.getElementById(id).style.property = nuevo estilo

por ejemplo:

document.getElementById("p2").style.color = "blue";
1
  • Ese puede ser un método, pero lo que realmente quiero saber es como seria con border radious y wordspacing. Es decir : document.getElementById("p2").style.(borderRadious??)=3px; Commented el 8 ago. 2017 a las 18:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.