Изменение размера текста при нажатии на ссылку ⇐ CSS
-
Anonymous
Изменение размера текста при нажатии на ссылку
Я пытаюсь увеличить или уменьшить размер текста в зависимости от ссылки, на которую нажимает пользователь. Я пытаюсь использовать почти весь JavaScript или CSS, поэтому ссылки создаются на основе JavaScript ранее в файле.
мой HTML — мой JS
const resizeText = (() => { функция createLink(id, textContent, href, ariaLabel) { const sampleSizes = document.createElement("X"); sampleSizes.id = идентификатор; sampleSizes.href = href; sampleSizes.textContent = textContent; sampleSizes.setAttribute("aria-label", ariaLabel); вернуть образцы размеров; } функция createTextElement(textContent) { вернуть документ.createTextNode(textContent); } функция AttachEventListeners() { const size1 = createLink("textS", "X", "#", "Обычный размер"); const size2 = createLink("textM", "X", "#", "Большой размер"); const size3 = createLink("textL", "X", "#", "Наибольший размер"); const foo = document.getElementById("foo"); foo.appendChild(createTextElement(" ")); foo.appendChild(textS); foo.appendChild(createTextElement(" ")); foo.appendChild(textM); foo.appendChild(createTextElement(" ")); foo.appendChild(textL); } функция инициализации() { AttachEventListeners(); } возвращаться { в этом, }; функция измененияTextSize(sizeChange) { const allTextElements = document.querySelectorAll('*'); allTextElements.forEach(element => { const currentSize = parseFloat(window.getComputedStyle(element, null).getPropertyValue('font-size')); если (sizeChange === 'textM') { element.style.fontSize = (currentSize + 0,25) + 'rem'; } else if (sizeChange === 'textL') { element.style.fontSize = (currentSize + 0,5) + 'rem'; } else if (sizeChange === 'textS') { element.style.fontSize = (currentSize - 0,25) + 'rem'; } });
})(); изменить размертекста.инит();
Я пытаюсь увеличить или уменьшить размер текста в зависимости от ссылки, на которую нажимает пользователь. Я пытаюсь использовать почти весь JavaScript или CSS, поэтому ссылки создаются на основе JavaScript ранее в файле.
мой HTML — мой JS
const resizeText = (() => { функция createLink(id, textContent, href, ariaLabel) { const sampleSizes = document.createElement("X"); sampleSizes.id = идентификатор; sampleSizes.href = href; sampleSizes.textContent = textContent; sampleSizes.setAttribute("aria-label", ariaLabel); вернуть образцы размеров; } функция createTextElement(textContent) { вернуть документ.createTextNode(textContent); } функция AttachEventListeners() { const size1 = createLink("textS", "X", "#", "Обычный размер"); const size2 = createLink("textM", "X", "#", "Большой размер"); const size3 = createLink("textL", "X", "#", "Наибольший размер"); const foo = document.getElementById("foo"); foo.appendChild(createTextElement(" ")); foo.appendChild(textS); foo.appendChild(createTextElement(" ")); foo.appendChild(textM); foo.appendChild(createTextElement(" ")); foo.appendChild(textL); } функция инициализации() { AttachEventListeners(); } возвращаться { в этом, }; функция измененияTextSize(sizeChange) { const allTextElements = document.querySelectorAll('*'); allTextElements.forEach(element => { const currentSize = parseFloat(window.getComputedStyle(element, null).getPropertyValue('font-size')); если (sizeChange === 'textM') { element.style.fontSize = (currentSize + 0,25) + 'rem'; } else if (sizeChange === 'textL') { element.style.fontSize = (currentSize + 0,5) + 'rem'; } else if (sizeChange === 'textS') { element.style.fontSize = (currentSize - 0,25) + 'rem'; } });
})(); изменить размертекста.инит();
Мобильная версия