如何使用JavaScript在WordPress中更改字体大小onClick
您是否曾经遇到过一个网站或博客,让访问者可以通过侧边栏中的某些+/-按钮更改字体大小?通常情况下,您永远不必添加此功能,因为所有主流浏览器都有放大/缩小按钮,但仍有大量用户不熟悉该缩放功能。在本文中,我们将向您展示如何使用简单的JavaScript函数和一些HTML为您的用户提供更改WordPress中字体大小的能力。
首先,让我们在页眉或页脚中添加此脚本:%%% %%然后只需在主题中的任何位置添加此代码(大多数人将其放在侧边栏中)
<script type="text/javascript">function resizeText(multiplier) { if (document.body.style.fontSize == "") { document.body.style.fontSize = "1.0em"; } document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + "em"; }</script>
如果需要,您还可以使用+/-图标或其他图像。为了实现所有这些目的,您需要为html元素指定font-size。
<a href="javascript:void(0);" onclick="resizeText(1)" id="plustext">Make text bigger</a> | <a href="javascript:void(0);" onclick="resizeText(-1)" id="minustext">Make text smaller</a>
或者,如果您想限制包含font-size的区域(例如:just)你的内容区域),然后将原始的javascript改为这样:
这意味着你只有字体大小改变了id =“content”的元素。
<script type="text/javascript"> var c = document.getElementById("content"); function resizeText(multiplier) { if (c.style.fontSize == "") { c.style.fontSize = "1.0em"; } c.style.fontSize = parseFloat(c.style.fontSize) + (multiplier * 0.2) + "em"; } </script>
寻找一个实例?查看Eric Wendelin的博客。
寻找一个实例?查看Eric Wendelin的博客。
评论被关闭。