Кнопка включения Javascript для изменения размера шрифта страницы или размера шрифта div - PullRequest
Новая
       41

Кнопка включения Javascript для изменения размера шрифта страницы или размера шрифта div

0 голосов
/ 22 сентября 2018

Я опубликую страницы, которые я исследовал в конце.Мне нужно 3 кнопки, чтобы изменить размер шрифта div с абзацами текста на 1.0em, 2.0em и 3.0em при нажатии на кнопки.Начальный размер основного шрифта составляет 1.0em.Я должен использовать «Em» на шрифте.Я прошу прощения, если это не правильный формат, чтобы опубликовать это. Я пытался следовать справке и правилам сайта.

Это актуальная формулировка вопросов:

(1) Добавьте три кнопки под горизонтальным правилом.Пометьте кнопки «Normal», «Medium» и «Large».

(2) Добавьте обработчик события «click» к кнопке «Normal», чтобы при нажатии на кнопку весь текст вDiv «message» изменен на размер шрифта 1em.

(3) Добавьте обработчик события «click» к кнопке «Medium», чтобы при нажатии на кнопку весь текст в «message»Div изменяется на размер шрифта 1.5em.На рисунке 14 показана часть получившейся веб-страницы.

(4) Добавьте обработчик события click для кнопки «Large», чтобы при нажатии кнопки весь текст в div «message»изменен на размер шрифта 2.0em.

Вот код, который у меня есть: 

<div id="text" style="font-size: 1em">
<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
</div>
<hr>
<input type="button" value="Normal"
onclick="document.body.style.fontsize='1.0 em'">
<input type="button" value="Medium"
onclick="document.body.style.fontsize='1.5 em'">
<input type="button" value="Large"
onclick="document.body.style.fontsize='2.0 em'">
<!--  TEST BUTTON BEGIN -->
<br>
<input type="button" value="Test1"
onclick="document.getElementById("text").style.fontSize = "1.0 em">
<input type="button" value="Test15"
onclick="document.getElementById("text").style.fontSize = "1.5 em">
<input type="button" value="Test20"
onclick="document.getElementById("text").style.fontSize = "2.0 em">
<!-- TEST BUTTON END -->

Я создал тестовую секцию из 3 кнопок под 3 фактическими кнопками, чтобы просто возитьсявокруг с кодами JavaScript, которые я нашел на stackoverflow.com.Любая помощь или руководство будет принята с благодарностью.Спасибо.

Я проверил эти страницы с похожими проблемами:

изменить размер шрифта текста всего содержимого страницы

Какизменить FontSize By JavaScript?

нажмите кнопку, чтобы изменить размер шрифта текста в javascript / css

Увеличить размер шрифтавсей веб-страницы на событие нажатия кнопки, используя jquery

Увеличение размера шрифта одним нажатием кнопки, используя только JavaScript

Ответы [ 2 ]

0 голосов
/ 22 сентября 2018

Вам нужно поставить нужное число рядом со словом em.Кроме того, поскольку у вас есть onclick метод с использованием " двойных кавычек, вы должны использовать одинарные кавычки ' в коде JavaScript, например:

onclick="document.getElementById('text').style.fontSize = '1.0em'"

Пример: 

<div id="text" style="font-size: 1em">
  <p>paragraph 1</p>
  <p>paragraph 2</p>
  <p>paragraph 3</p>
</div>
<hr>
<input type="button" value="Normal" onclick="document.getElementById('text').style.fontSize = '1.0em'">
<input type="button" value="Medium" onclick="document.getElementById('text').style.fontSize = '1.5em'">
<input type="button" value="Large" onclick="document.getElementById('text').style.fontSize = '2.0em'">
<!-- TEST BUTTON END -->
0 голосов
/ 22 сентября 2018

просто пропустите пробел между размером и em

неверный синтаксис: 

document.getElementById("text").style.fontSize = "2.0 em">

правильный синтаксис: 

document.getElementById("text").style.fontSize = "2.0em">
...