Html 更改整个页面内容的文本字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16460990/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change text-font size of whole page content
提问by awais
is there a way in javascript/css that i can change text size of all the labels, headings, paragraphs etc on a single click and without explicitly getting element's id and then changing its font size.
在 javascript/css 中是否有一种方法可以通过单击更改所有标签、标题、段落等的文本大小，而无需明确获取元素的 id，然后更改其字体大小。
what i am doing right now is that i get element's id through javascript and change its font size explicitly. To get a clear picture of what i am doing check this linkor check the following code
我现在正在做的是通过 javascript 获取元素的 id 并显式更改其字体大小。要清楚地了解我在做什么，请查看此链接或查看以下代码
<script type="text/javascript">
function changemysize(myvalue) {
var div = document.getElementById("mymain");
div.style.fontSize = myvalue + "px";
}
</script>
HTML code
HTML代码
Choose a text size:
<font size="2"><a href="javascript:void(0);" onclick="changemysize(16);">A</a></font>
<font size="4"><a href="javascript:void(0);" onclick="changemysize(20);">A</a></font>
<font size="5"><a href="javascript:void(0);" onclick="changemysize(25);">A</a></font>
<div id="mymain">
Only this text gets affected
</div>
采纳答案by akash4eva
Add an id to the bodytag and then go ahead and change it's font size with JavaScript. This will change the font size for every element inside your webpage! It is as simple as that!
向body标签添加一个 id ，然后继续使用 JavaScript 更改它的字体大小。这将更改网页中每个元素的字体大小！它是如此简单！
回答by Tezcat
You can use rem, which is better than emin some places because emcascades and remdoes not.
您可以使用rem，这比em在某些地方更好，因为em级联而rem不是级联。
With all lengths are specified in rem, you can adjust the sizes by change the font-size of the <html>element.
所有长度都在 中指定rem，您可以通过更改<html>元素的字体大小来调整大小。
See also: http://snook.ca/archives/html_and_css/font-size-with-rem
另见：http: //snook.ca/archives/html_and_css/font-size-with-rem
回答by Ivo Tebexreni
Worked for me:
为我工作：
function changeFont(element){
element.setAttribute("style",element.getAttribute("style")+";font-family: Courier New");
for(var i=0; i < element.children.length; i++){
changeFont(element.children[i]);
}
}
changeFont(document.getElementsByTagName("body")[0]);
回答by Christian
I'd recommend using emsas a measure for setting font sizes. That way, with 1 tag, you can adjust the font sizes of every element relatively, instead of specifying specific sizes. Example:
我建议使用ems作为设置字体大小的措施。这样，使用 1 个标签，您可以相对地调整每个元素的字体大小，而不是指定特定大小。例子：
body {
font-size: 1em;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.3em;
}
p.large {
font-size: 1.2em;
}
Then you could apply a class to the body, like so
然后你可以将一个类应用到身体上，就像这样
body.enlarged {
font-size: 1.3em;
}
Which would scale the font size of allelements respectively. The javascript code would go something like this:
这将分别缩放所有元素的字体大小。javascript 代码会是这样的：
document.body.classList.add('enlarged');
Demo here: http://jsfiddle.net/bW9fM/1/
演示在这里：http: //jsfiddle.net/bW9fM/1/
回答by Walter Stabosz
An alternative approach based on this answer
基于此答案的替代方法
// iterate over the children of an element, and the element itself
// and excute a callback function, passing in the elements
function mapElement(element, callback){
callback(element);
for(var i=0; i < element.children.length; i++){
callback(element.children[i]);
}
}
mapElement(
document.querySelector('body'),
(e) => {
e.style.fontFamily = 'Arial';
e.style.fontSize = '12pt';
}
);
