Código JavaScript de Acessibilidade para Aumentar e Diminuir Fontes na Página - Bruno Devx - BR Criativus

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

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:



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