更改整个页面内容的文本字体大小

Question

在 javascript/css 中是否有一种方法可以通过单击更改所有标签、标题、段落等的文本大小，而无需明确获取元素的 id，然后更改其字体大小。

我现在正在做的是通过 javascript 获取元素的 id 并显式更改其字体大小。 要清楚地了解我在做什么，请查看此链接或查看以下代码

<script type="text/javascript">
function changemysize(myvalue) {
    var div = document.getElementById("mymain");
    div.style.fontSize = myvalue + "px";   
}
</script>

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>

Answer 1

您可以使用rem ，这在某些地方比em更好，因为em级联而rem没有。

所有长度都在rem中指定，您可以通过更改<html>元素的字体大小来调整大小。

另见： http : //snook.ca/archives/html_and_css/font-size-with-rem

Answer 2

为我工作：

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]);

Answer 3

向body标签添加一个 id，然后继续使用 JavaScript 更改它的字体大小。 这将更改网页中每个元素的字体大小！ 它是如此简单！

Answer 4

我建议使用ems作为设置字体大小的方法。 这样，使用 1 个标签，您可以相对地调整每个元素的字体大小，而不是指定特定大小。 例子：

body {
  font-size: 1em;
}

h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 1.3em;
}

p.large {
  font-size: 1.2em;
}

然后你可以将一个类应用到身体上，就像这样

body.enlarged {
  font-size: 1.3em;
}

这将分别缩放所有元素的字体大小。 javascript 代码会是这样的：

document.body.classList.add('enlarged');

演示在这里： http : //jsfiddle.net/bW9fM/1/

Answer 5

基于此答案的替代方法

// 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'; 
    }
);

更改整个页面内容的文本字体大小

问题描述

5 个解决方案

解决方案1
5 2013-05-09 12:00:35

解决方案2
5 2017-11-16 01:20:26

解决方案3
1 已采纳 2013-05-09 11:45:36

解决方案4
1 2013-05-09 11:52:02

解决方案5
0 2020-05-06 15:53:18

更改整个页面内容的文本字体大小

问题描述

5 个解决方案

解决方案1 5 2013-05-09 12:00:35

解决方案2 5 2017-11-16 01:20:26

解决方案3 1 已采纳 2013-05-09 11:45:36

解决方案4 1 2013-05-09 11:52:02

解决方案5 0 2020-05-06 15:53:18

解决方案1
5 2013-05-09 12:00:35

解决方案2
5 2017-11-16 01:20:26

解决方案3
1 已采纳 2013-05-09 11:45:36

解决方案4
1 2013-05-09 11:52:02

解决方案5
0 2020-05-06 15:53:18