Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Javascript cambio de tamaño de letra en todos los elementos dentro de un contenedor

JavaScript - Javascript cambio de tamaño de letra en todos los elementos dentro de un contenedor

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 8
Ha aumentado su posición en 19 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Javascript cambio de tamaño de letra en todos los elementos dentro de un contenedor

Publicado por Alberto (3 intervenciones) el 02/08/2019 18:21:05
Situación:

Hay un DIV con varios elementos dentro desconocidos, podría ser, por ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="granContenedor">
  <table style="font-size:14pt;">
  ...
    Texto
  ...
  </table>
  <div>
  ...
    <span style="font-size:17pt;">Texto</span>
  ...
    <input type="text" style="font-size:20pt;">Otro texto</input>
  ...
  </div>
</div>

Objetivo: Cambiar el tamaño de letra de todo el texto que está dentro del contenedor "granContenedor".

document.getElementById("granContenedor").style.fontSize = "12pt"; no funciona.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Javascript cambio de tamaño de letra en todos los elementos dentro de un contenedor

Publicado por joel (895 intervenciones) el 02/08/2019 23:24:23
Es correcto que no te funcione, ya que tienes definido el tamaño de la fuente a fuego con style=...!!!

El orden de prioridades, creo recordar es:
style
id
class

Por lo que si cambias el tamaño de un id, el style tiene mas fuerza.

El error es utilizar style y luego querer cambiarlo desde los estilos

Lo suyo es que todo funcione desde las clases de css, nunca utilizar style!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 8
Ha aumentado su posición en 19 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Javascript cambio de tamaño de letra en todos los elementos dentro de un contenedor

Publicado por Alberto (3 intervenciones) el 03/08/2019 00:12:04
Sé lo que sucede, gracias. Lo que busco es solución, si la hay. Cambiarlo todo sería muy costoso ya que esto lo tengo que hacer en más de mil páginas.

Cuando en un elemento usamos inherit, se heredan las propiedades del padre; no sé si hay algo a la inversa, es decir; que los estilos del padre los hereden los elementos que contiene, aún cuando tengan definido un style concreto. Como imagino que esto no existirá, antes que confeccionar un script que busque los elementos que contiene el contenedor padre cubriendo todas las posibilidades, no sé si hay alguna forma de recorrer de una manera más automática todos los elementos su TagName.

He probado lo siguiente:

1
2
3
4
5
6
7
const o = document.getElementsById('Id_contenedor_Padre').getElementsByTagName('span');
for(let g of o){g.style.fontSize='14pt';};
const o = document.getElementsById('Id_contenedor_Padre').getElementsByTagName('center');
for(let g of o){g.style.fontSize='14pt';};
const o = document.getElementsById('Id_contenedor_Padre').getElementsByTagName('table');
for(let g of o){g.style.fontSize='14pt';};
.....

y funciona, pero lo tengo que aplicar a todos los tagName posibles y quería saber si hay algo que lo optimice.

Un saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Javascript cambio de tamaño de letra en todos los elementos dentro de un contenedor

Publicado por joel (895 intervenciones) el 03/08/2019 20:55:23
Hola Alberto, haciendo lo que comentas, si ha funcionado... haber si te sirve...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="granContenedor">
  <table style="font-size:14pt;">
  ...
    Texto
  ...
  </table>
  <div>
  ...
    <span style="font-size:17pt;">Texto</span>
  ...
    <input type="text" style="font-size:20pt;">Otro texto</input>
  ...
  </div>
</div>
 
<script>
const contenedor=document.getElementById("granContenedor");
const style=document.querySelectorAll("* [style]");
for (el of style) {
    el.style.fontSize="inherit";
}
 
contenedor.style.fontSize="50px";
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 8
Ha aumentado su posición en 19 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Javascript cambio de tamaño de letra en todos los elementos dentro de un contenedor

Publicado por Alberto (3 intervenciones) el 04/08/2019 16:25:25
Sólo un pequeño ajuste que imagino que es un errorcillo que se ha colao, donde pone document.querySelectorAll he puesto contenedor.querySelectorAll. Así queda de la siguiente manera:

1
2
3
4
5
6
7
8
9
<script>
const contenedor=document.getElementById("granContenedor");
const style=contenedor.querySelectorAll("* [style]");
for (el of style) {
    el.style.fontSize="inherit";
}
 
contenedor.style.fontSize="50px";
</script>


Funciona y cumple perfectamente con lo que buscaba. Muchas gracias Joel, no solo por resolver el problema si no también por lo que he aprendido.

Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Javascript cambio de tamaño de letra en todos los elementos dentro de un contenedor

Publicado por joel (895 intervenciones) el 05/08/2019 11:38:34
Si, si, cierto Alberto!!! me equivoque en las pruebas!!

Gracias por comentarlo!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar