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

问题描述：

有没有在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>

答

的ID添加到body标签，然后继续前进，改变它的字体大小与JavaScript。这将改变网页中每个元素的字体大小！它是如此简单！

或只是简单的样式身体 – 2013-05-09 11:49:08

无需ID身体，只要使用'document.body'。 – 2013-05-09 11:50:18

答

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

为什么要将常规js与jquery混合？ – 2013-05-09 11:57:40

@BramVanroy jQuery用于演示绑定处理程序;这不是问题的一部分（他绑定了自己的处理程序，albiet以糟糕的方式）问题没有用jQuery标记，因此我没有使用jQuery的'.addClass（）'。使用库并不意味着你不能使用原始JS。如果它让你的生活变得更好，这里有一个[纯js版本]（http://jsfiddle.net/bW9fM/1/）和[jQuery版本]（http://jsfiddle.net/bW9fM/2/）。 – 2013-05-09 12:01:51

答

您可以使用rem，这是优于em在一些地方，因为em瀑布和rem没有。

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

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

非常方便的提示！可惜它需要IE9 plus，因为'ems'既可以是祝福也可以是诅咒。如果我不关心较老的IE，我可能会从现在开始使用'rem'。 – 2013-05-09 12:06:44

答

为我工作：

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

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

相关推荐