post
Código JavaScript de Acessibilidade para Aumentar e Diminuir Fontes na Página
Publicado em: 12/09/2024 / Atualizado em: 12/09/2024
Nesse post vou compartilhar um trecho de código Javascript simples para implementar a função de aumentar e diminuir as fontes da página. Onde você pode adicionar quais as CLASS, IDs ou elementos HTML da página deseja manipular.
<script> // Função para alterar o tamanho da fonte em pixels function changeFontSize(delta) { const styleElement = document.getElementById('dynamic-font-style') || createStyleElement(); let currentFontSize = parseInt(localStorage.getItem('fontSize')) || 16; let newFontSize = currentFontSize + delta; // Limita o tamanho da fonte entre 10px e 32px newFontSize = Math.max(10, Math.min(newFontSize, 32)); const cssRules = ` .elementor-widget-text-editor *, .elementor-button *, [class*='description'], [class*='description'] *, [class*='excerpt'], [class*='excerpt'] *, [class*='menu'] a:not(.elementor-icon), p { font-size: ${newFontSize}px !important; } `; styleElement.textContent = cssRules; localStorage.setItem('fontSize', newFontSize); } // Função para criar o elemento de estilo dinâmico function createStyleElement() { const styleElement = document.createElement('style'); styleElement.id = 'dynamic-font-style'; document.head.appendChild(styleElement); return styleElement; } // Carregar o tamanho da fonte do cache ao carregar a página window.onload = function () { const savedFontSize = localStorage.getItem('fontSize'); if (savedFontSize) { const styleElement = createStyleElement(); const cssRules = ` .elementor-widget-text-editor *, .elementor-button *, [class*='description'], [class*='description'] *, [class*='excerpt'], [class*='excerpt'] *, [class*='menu'] a:not(.elementor-icon), p { font-size: ${savedFontSize}px !important; } `; styleElement.textContent = cssRules; } // Adicionar eventos de clique aos botões document.getElementById('diminuir-fonte').addEventListener('click', function () { changeFontSize(-2); }); document.getElementById('aumentar-fonte').addEventListener('click', function () { changeFontSize(2); }); } </script>
Publicações recomendadas:
Inscreva-se em Nossa News:
Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Link Curto para Compartilhamento
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.
bruno.art.br/pb/5661
ID de Referência: 5661
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.