是否可以使用 js 更改为 HTML 根元素样式
[英]is it possible to change to HTML root element style with js
问题描述
Hi im trying to change to font-size of the whole HTML page currently i have in my css :
嗨，我正在尝试更改当前在我的 css 中的整个 HTML 页面的font-size ：
html {
font-size : 65.5%
}
and im looking to mutate the value with JS for ex :我希望用 JS 改变值，例如：
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但是，如果这是不可能的，请向我解释原因，并可能为此提供解决方案，谢谢
3 个解决方案
解决方案1
3 已采纳 2020-02-11 19:37:11
getElementsByTagName is grabbing anHTMLCollection vs. a single element. getElementsByTagName正在抓取HTMLCollection与单个元素。 [0] index it to grab the html tag and proceed with what you had: [0]索引它以获取html标签并继续执行您拥有的内容：
document.getElementsByTagName('html')[0].style.fontSize = '35%';
Alternatively, you could use querySelector , which would just select the first matching element:或者，您可以使用querySelector ，它只会选择第一个匹配元素：
document.querySelector('html').style.fontSize = '35%';
解决方案2
0 2020-02-11 19:53:48
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.正如卡尔所说，您的代码通过期望来自document.getElementsByTagName('html')的单个<html>元素而遇到问题，而是获取元素的集合。 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 !但是，您可能还会遇到另一个问题：如果您试图通过将较小的字体大小应用于根<html>元素来减小所有字体大小，那么您只会成功地影响相对于<html>元素的字体大小！ Setting font-size: 20px;设置font-size: 20px; will cause that element to always have 20px font, no matter the font sizes of its ancestor elements.将导致该元素始终具有20px字体，无论其祖先元素的字体大小如何。
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!遵循 Carl 的建议，并确保页面中的所有字体大小都是相对的，将为您提供所需的结果！
解决方案3
0 2020-10-27 17:07:56
另一种方式，稍微简洁一点：
document.documentElement.style.fontSize = '35%'
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.