更改整個頁面內容的文本字體大小

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