Привет, я пытаюсь перейти на font-size всей HTML-страницы, в настоящее время у меня есть в моем CSS:

html {
  font-size : 65.5%
}

И я хочу изменить значение с помощью JS для ex:

 document.getElementsByTagName('html').style.fontSize = '35%'

Если это, однако, невозможно, пожалуйста, объясните мне, почему и, возможно, предоставить решение для этого спасибо

2
sion madisson 11 Фев 2020 в 22:35

2 ответа

Лучший ответ

getElementsByTagName получает HTMLCollection против a один элемент [0] проиндексируйте его, чтобы получить тег html и перейдите к тому, что у вас было:

document.getElementsByTagName('html')[0].style.fontSize = '35%';

В качестве альтернативы вы могли бы использовать querySelector, который бы просто выберите первый соответствующий элемент:

document.querySelector('html').style.fontSize = '35%';
3
Sean 11 Фев 2020 в 19:49

Как сказал Карл, ваш код сталкивается с проблемой, ожидая одного элемента <html> от document.getElementsByTagName('html'), но вместо этого получает collection элементов. Ответ Карла поможет вам решить эту проблему.

Тем не менее, есть еще одна проблема, с которой вы можете столкнуться: если вы пытаетесь уменьшить все размеры шрифтов, применяя меньший размер шрифта к корневому элементу <html>, то вы только добьетесь успеха в изменении размеров шрифта относительно { {X1}} элемент ! Установка font-size: 20px; приведет к тому, что у этого элемента всегда будет шрифт 20px, независимо от размеров шрифта его предшественников.

Мы видим, что некоторые размеры шрифтов не могут быть изменены в следующем примере:

/* We attempt to shrink all font sizes: */
html { font-size: 66%; }

/* These styles just make it easier to see what's happening */
div {
  box-shadow: 0 0 0 1px black;
  padding: 4px;
  margin-bottom: 10px;
  line-height: 30px;
  background-color: #ffffff;
}
body > div { background-color: rgba(0, 0, 0, 0.05); }
**Html font-size: 66%**<br/><br/>
<div style="font-size: 100%">
  font-size: 100%;
</div>
<div style="font-size: 100%">
  font-size: 100%;
  <div style="font-size: 100%">
    font-size: 100%;
  </div>
</div>
<div style="font-size: 16px">
  font-size: 16px; (not effected by html font-size!)
</div>
<div style="font-size: 16px">
  font-size: 16px; (not effected by html font-size!)
  <div style="font-size: 100%">
    font-size: 100%; (not effected by html font-size!)
  </div>
</div>

Следуя совету Карла и убедившись, что все размеры шрифтов на вашей странице являются относительными, вы получите желаемый результат!

0
Gershom 11 Фев 2020 в 19:53