You are here:  Home » PHP » 如何使用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的博客。

评论被关闭。