logo标签列表

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

javascripthtmlcss
10

在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>
5个回答
5
你可以更改元素及其子代的字体以"强制"所有内容更改：
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]);

或者，您可以使用元素的style属性作为对象：

function changeFont(element){
    element.style.fontFamily="Courier New";
    for(var i=0; i < element.children.length; i++){
        changeFont(element.children[i]);
    }
}
changeFont(document.getElementsByTagName("body")[0]);
5
您可以使用 rem，因为在某些情况下它比 em 更好，因为 em 会级联，而 rem 不会。
如果所有长度都用 rem 指定，您可以通过更改 <html> 元素的字体大小来调整大小。
另请参阅：http://snook.ca/archives/html_and_css/font-size-with-rem
非常实用的技巧！可惜需要IE9及以上版本，因为ems既可以是福音也可能是诅咒。如果我不在意旧版IE浏览器，从现在开始我可能会使用rem。 - Christian
1
我建议使用“ems”作为设置字体大小的度量单位。这样，只需一个标签，您就可以相对地调整每个元素的字体大小，而不是指定具体的尺寸。例如：
body {
  font-size: 1em;
}

h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 1.3em;
}

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

然后你可以将一个类应用到body，像这样：
body.enlarged {
  font-size: 1.3em;
}

这将按比例调整所有元素的字体大小。JavaScript 代码应该如下：

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

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

为什么要将常规的JS与jQuery混合使用？ - Bram Vanroy
@BramVanroy jQuery 用于演示绑定处理程序；它不是问题的一部分（他已经绑定了自己的处理程序，尽管方式很差），因此我没有使用 jQuery 的 .addClass()。使用库并不意味着您不能使用原始 JS。如果这使您的生活更轻松，这里有一个纯JS版本和一个jQuery版本。 - Christian
1
给 body 标签添加一个 id，然后使用 JavaScript 更改它的字体大小。这将更改网页中每个元素的字体大小！就是这么简单！
2
or just simply style the body - Patsy Issa
7
不需要使用身份证明身体，只需使用 document.body。 - Bram Vanroy
0

基于这个答案的另一种方法

// 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'; 
    }
);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接