admin管理员组

文章数量:1297051

Hi im trying to change to font-size of the whole HTML page currently i have in my css :

html {
  font-size : 65.5%
}

and im looking to mutate the value with JS for ex :

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

if that however is not possible please explain to me why and maybe provide a solution for this thanks

Hi im trying to change to font-size of the whole HTML page currently i have in my css :

html {
  font-size : 65.5%
}

and im looking to mutate the value with JS for ex :

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

if that however is not possible please explain to me why and maybe provide a solution for this thanks

  • javascript
  • css
Share Improve this question asked Feb 11, 2020 at 19:35 sion madissonsion madisson 592 silver badges7 bronze badges 2
  • i know that i can use the fontSize on the body element – sion madisson Commented Feb 11, 2020 at 19:37
  • The easier way to do this is just document.body.style.fontSize = '35%'; – ControlAltDel Commented Feb 11, 2020 at 19:38
Add a ment  | 

3 Answers 3

Reset to default 7

Another way, slightly more concise:

document.documentElement.style.fontSize = '35%'

getElementsByTagName is grabbing an HTMLCollection vs. a single element. [0] index it to grab the html tag and proceed with what you had:

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

Alternatively, you could use querySelector, which would just select the first matching element:

document.querySelector('html').style.fontSize = '35%';

As Carl said, your code runs into an issue by expecting a single <html> element from document.getElementsByTagName('html'), but is instead getting a collection of elements. Carl's answer will help you resolve that problem.

There is still another problem you may encounter though: if you are trying to reduce all font sizes by applying a smaller font size to the root <html> element you will only succeed in effecting font-sizes relative to the <html> element! Setting font-size: 20px; will cause that element to always have 20px font, no matter the font sizes of its ancestor elements.

We can see that some font sizes fail to change in the following example:

/* 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>

Following Carl's advice, and making sure all font-sizes in your page are relative, will give you the results you want!

本文标签： javascriptis it possible to change to HTML root element style with jsStack Overflow

版权声明：本文标题：javascript - is it possible to change to HTML root element style with js - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741641168a2389925.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。