post

Código JavaScript de Acessibilidade para Aumentar e Diminuir Fontes na Página

Publicado em: 12/09/2024 / Atualizado em: 12/09/2024

Categorias: BlogJavaScript (JS)JS

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.

Bruno Devs News


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.

Clique aqui e entre em contato