更改整个页面内容的文本字体大小
[英]change text-font size of whole page content
问题描述
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.我现在正在做的是通过 javascript 获取元素的 id 并显式更改其字体大小。 To get a clear picture of what i am doing check this link or check the following code要清楚地了解我在做什么，请查看此链接或查看以下代码
<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>
5 个解决方案
解决方案1
5 2013-05-09 12:00:35
You can use rem , which is better than em in some places because em cascades and rem does 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
解决方案2
5 2017-11-16 01:20:26
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]);
解决方案3
1 已采纳 2013-05-09 11:45:36
Add an id to the body tag and then go ahead and change it's font size with JavaScript.向body标签添加一个 id，然后继续使用 JavaScript 更改它的字体大小。 This will change the font size for every element inside your webpage!这将更改网页中每个元素的字体大小！ It is as simple as that!它是如此简单！
解决方案4
1 2013-05-09 11:52:02
I'd recommend using ems as a measure for setting font sizes.我建议使用ems作为设置字体大小的方法。 That way, with 1 tag, you can adjust the font sizes of every element relatively , instead of specifying specific sizes.这样，使用 1 个标签，您可以相对地调整每个元素的字体大小，而不是指定特定大小。 Example:例子：
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 all elements 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/
解决方案5
0 2020-05-06 15:53:18
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';
}
);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.