Question

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

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

<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没有。{/ p>

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

另请参阅：http://snook.ca/archives/html_and_css/font-size-with-rem

Answer 2

在body标记中添加ID，然后继续使用JavaScript更改其字体大小。这将改变网页中每个元素的字体大小！就这么简单！

Answer 3

我建议使用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 4

为我工作：

function changeFont(element){
    element.setAttribute("style",element.getAttribute("style")+";font-family: Courier New");
    for(var i=0; i&lt;element.children.length; i++){
        changeFont(element.children[i]);
    }
}
changeFont(document.getElementsByTagName("body")[0]);

Answer 5

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

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

5 个答案: