3

Buenas he conseguido este código pero no quiero que sea tipo seleccionador o lista simplemente quiero dos botones uno que aumente el tamaño de la fuente del body y otro que disminuya.

Tengo hecho el boton pero no tengo ni idea de como hacer para que aumente, os dejo el codigo entero.(Soy un principiante).

function CambioTexto(){
  var e=document.getElementsByTagName("p");
  var x=document.getElementById("valor");
  for (var i = 0; i < e.length; i++){
    if (x.options[x.selectedIndex].text=="elige"){
      return false
    }
    e[i].style.fontSize=x.options[x.selectedIndex].text+"px";
    e[i].style.fontFamily="Arial";
    e[i].style.color="#000000";
  }
}
<html>
<head>

</head>
<body>
Botones
<input type="button" name="aumentar" value="aumentar" onclick="CambioTexto">


Selecciona un tamaño:
<select id="valor" onchange="CambioTexto()">
<option>elige</option>
<option>10</option>
<option>15</option>
<option>20</option>
<option>25</option>
<option>30</option>
<option>35</option>
<option>40</option>
</select>

<p>Si no lees bien el texto . . .</p>

<div>
<p>TEXTO QUE QUIERAS</p>
<p>TEXTO QUE QUIERAS</p>
<p>TEXTO QUE QUIERAS</p>
<p>TEXTO QUE QUIERAS</p>
<p>TEXTO QUE QUIERAS</p>
<p>TEXTO QUE QUIERAS</p>
</div>
</body>
</html>

0

2 respuestas 2

5

No es muy diferente a lo que ya tienes, simplemente necesitas crear los dos botones y asignarle el evento onclick y pasarle el operador(+/-).

Dicho esto lo puedes hacer de la siguiente manera.

//Todos los elementos a los que les vamos a cambiar el fontSize
const elementsList = document.getElementsByTagName('p');

function getElementFontSize(element){
  //getComputedStyle nos devuelve las propiedades css de cada párrafo(elemento)
  const elementFontSize = window.getComputedStyle(element, null).getPropertyValue('font-size');
  return parseFloat(elementFontSize);  //Devolvemos el total de pixeles
}

function cambiarTexto(operador) {
   for(let element of elementsList) {
     //Obtener el total de pixel de cada párrafo.
     const currentSize = getElementFontSize(element);
     
     //Restar o sumar, dependiendo del operador.
     const newFontSize = (operador === '+' ? (currentSize + 1) : (currentSize - 1)) + 'px';
     //Aplicarle al parrafo actual el nuevo tamaño.
     element.style.fontSize = newFontSize
   }
}
  <button onclick="return cambiarTexto('+')">+</button>
  <button onclick="return cambiarTexto('-')">-</button>
  
  <p>Este texto mola!!!</p>
  <p>Este texto mola!!!</p>
  <p>Este texto mola!!!</p>
  <p>Este texto mola!!!</p>

2
  • Gracias tio me ha funcionado en la pagina todas la p al menos aumentan de tamaño:) Commented el 17 dic. 2019 a las 11:29
  • 1
    También puedes utilizar getElementsByClassName() por si quieres hacerlo en cualquier elemento. Me alegro que te haya servido.
    – MitaCloud
    Commented el 17 dic. 2019 a las 11:38
2

Con este código se hace lo que pides, simplemente hice dos funciones una para cada botón y sumé y resté según se pulse.

<html>
<head>
<script language="JavaScript">
var num = 12;
function CambioTextoMayor(){
  num = num + 1;
  var font=parseInt(num);
  document.getElementById('texto').style.fontSize=font+"px";
}
function CambioTextoMenor(){
  num = num - 1;
  var font=parseInt(num);
  document.getElementById('texto').style.fontSize=font+"px";
}
</script>
</head>
<body>
Botones
<input type="button" value="aumentar" onclick="CambioTextoMayor();">
<input type="button" value="aumentar" onclick="CambioTextoMenor();">


<p id="texto">Si no lees bien el texto . . .</p>

</body>
</html> 

0

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.