Можно ли изменить стиль элемента на HTML root с помощью js - PullRequest
Новая
       0

Можно ли изменить стиль элемента на HTML root с помощью js

2 голосов
/ 11 февраля 2020

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

html {
  font-size : 65.5%
}

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

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

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

Ответы [ 2 ]

3 голосов
/ 11 февраля 2020

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

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

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

document.querySelector('html').style.fontSize = '35%';
0 голосов
/ 11 февраля 2020

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

Существует еще одна проблема, с которой вы можете столкнуться: если вы пытаетесь уменьшить размер шрифта, применяя меньший размер шрифта к элементу root <html>, который вы удастся только изменить размеры шрифта относительно элемента <html> ! Установка 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>

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...