0

necesito poder tener un selector de opciones que según la selección, cambie el estilo de fuente, con referencia a la selección. he encontrado una web que lo hace y estoy tratando de usar sus recursos Html pero en script no sé que hacer. https://www.invias.gov.co/index.php/solicitud-de-citas-y-turnos-web

Cuando se selecciona el menos o el más, la web cambia su tipografía en cuanto a tamaño, inmediatamente se escogen las opciones, igual lo hace con el tipo de fuente, sé que según la selección, se habilita una hoja de estilos que tiene ese formato, por ahora, necesito es poder cambiar las opciones y capturar algún dato para crear la condición.

.article-tools ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.article-tools ul li {
  border-bottom: 1px dotted #e5e5e5;
  padding: 6px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.article-tools ul li:before,
.article-tools ul li:after {
  display: table;
  content: " ";
}
.article-tools .typo-tools .btn {
  display: block;
  float: left;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
}

.article-tools ul li a {
  color: #333333;
  font-weight: 400;
  text-transform: uppercase;
}
.article-tools .typo-tools strong {
  display: block;
  float: left;
  font-weight: 400;
  width: 96px;
  line-height: 22px;
  text-align: center;
  text-transform: uppercase;
}
<section class="article-full has-article-tools">
   <div class="article-tools">
      <div class="typo-tools">
         <ul>
            <li data-fss="Smaller,Small,Medium,Big,Bigger">
               <a class="btn" href="#" title="Fuente menor" data-value="-1" data-target=".article" data-action="nextPrev" data-key="fs">-</a>
               <strong>Medium</strong>
               <a class="btn" href="#" title="Fuente Mayor" data-value="+1" data-target=".article" data-action="nextPrev" data-key="fs" data-default="Medium">+</a>
            </li>
            <li data-fonts="Default,Helvetica,Segoe,Georgia,Times" data-loop="true">
               <a class="btn" href="#" title="Estilo anterior" data-value="-1" data-target=".article" data-action="nextPrev" data-key="font"><</a>
               <strong>Default</strong>
               <a class="btn" href="#" title="Estilo siguiente" data-value="+1" data-target=".article" data-action="nextPrev" data-key="font" data-default="Default">></a>
            </li>
            <li class="toggle-reading">
               <a class="toggle off" href="#" title="Modo Lectura" data-action="onOff" data-value="reading-mode" data-default="off" data-target="html" data-key="reading-mode" data-cookie="no"> <i class="fa fa-newspaper-o visible-xs"></i><span class="hidden-xs">Modo Lectura<span></span></span></a>
            </li>
         </ul>
      </div>
   </div>
</section>

1 respuesta 1

1

Te dejo un ejemplo mínimo que resuelve el problema, luego puedes adaptarlo como mejor te parezca.

Se modifican los estilos de font-size y font-family de #contenido, luego por cascada los elementos internos reciben esos estilos.

var fontSize = 16;
var fontIndex = 0
var fonts = ['arial','open sans', 'verdana', 'tahoma','Impact', 'monaco']

function incrementar(){
    document.getElementById('#contenido')
  .style.fontSize = `${++fontSize}px`;
}

function decrementar(){
    document.getElementById('#contenido')
  .style.fontSize = `${--fontSize}px`;
}

function cambiarFuente(){
    document.getElementById('#contenido')
  .style.fontFamily = fonts[++fontIndex];
  
  // reiniciar el indice de las fuentes
  if(fontIndex == fonts.length -1) fontIndex = 0
}
<button onclick="incrementar()">
Incrementar
</button>
<button onclick="decrementar()">
Decrementar
</button>
<button onclick="cambiarFuente()">
cambiarFuente
</button>
<div id="#contenido">
   texto externo
   <div>
      texto  interno
   </div>
</div>

1
  • está muy bueno este código, y super rápido sin necesidad de llamar otras hojas de estilo, woaw, muchas gracias Commented el 24 jul. 2021 a las 17:34

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.