post #5661
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:
Link Direto
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.
bruno.art.br/?p=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.