Jquery 允许用户更改网页中的字体大小

我希望能够更改网页中文本的大小，我想可以使用jQuery，但我没有javascript方面的经验

另一个问题是该网页是一个phtml文件，并且使用了多个php echo命令。页面由多个phtml文件组成

---

编辑：我想为用户提供3种不同字体大小的选择。

我将采取的方法是将字体大小百分比应用于html的body标记

body
{
    font-size: 62.5%;
}

然后，为所有其他元素指定ems中的字体大小，ems将按继承字体大小的放大百分比生成大小

h1
{
    font-size: 1.8em;
}

p
{
    font-size: 1.2em;
}

我在正文中使用62.5%，因为在指定其他字体大小（例如1.2em=12px、1.8em=18px等）时，很容易将其转换为像素大小

然后以编程方式更改页面中的字体大小，只需更改正文上的字体大小值，页面的其余部分将相应地放大或缩小

您可以通过使用三个div来测试这一点

<div id="sizeUp">bigger text</div>
<div id="normal">normal text</div>
<div id="sizeDown">smaller text</div>

---

更改文本大小的最简单方法是使用css。如果您有权访问css文件，可以使用以下命令更改页面上所有文本的大小：

* {
    font-size: 110%;
  }

将其添加到styles.css文件的顶部，它会影响页面上的所有文本以及使用styles.css文件的所有文本。

尝试以下操作：

<p><a href="#" onclick="document.body.style.fontSize='x-small';">SMALL</a></p>
<p><a href="#" onclick="document.body.style.fontSize='medium';">MEDIUM</a></p>
<p><a href="#" onclick="document.body.style.fontSize='x-large';">BIG</a></p>

只需按CTRL-+和CTRL-（在Firefox中，在其他浏览器中可能不同）调整字体大小即可。

如何通过jquery增加和减少div内容的字体大小

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div class="data">

sghfhj jhkjik jhbjbjbh 
 </div>

 <div ><input type="button" value="increase" class="increaseFont"></input></div>
 <div><input type="button" value="decrease" class="decreaseFont"></input></div>

 <script type="text/javascript">
 $(document).ready(function(){
  $(".increaseFont,.decreaseFont").click(function(){
  var type=  $(this).val();
   var curFontSize = $('.data').css('font-size');
   alert(curFontSize);
   if(type=='increase'){
    $('.data').css('font-size', parseInt(curFontSize)+1);
    }
   else{
    $('.data').css('font-size', parseInt(curFontSize)-1);
   }
   alert($('.data').css('font-size'));

     });


 });
 </script>

sghfhj jhkjik JHBJBH
$（文档）.ready（函数（）{
$（“.increaseFont，.DecreseFont”）。单击（函数（）{
var type=$（this.val（）；
var curFontSize=$（'.data'）.css（'font-size'）；
警报（curFontSize）；
如果（类型==‘增加’）{
$（'.data'）.css（'font-size'，parseInt（curFontSize）+1）；
}
否则{
$（'.data'）.css（'font-size'，parseInt（curFontSize）-1）；
}
警报（$（'.data'）.css（'font-size'））；
});
});

---

这是有效的：）

只需使用jQuery和HTML，您就可以添加一个选项来增加/减少文本的字体大小。您必须使用class

kickblogger

将内容包装在一个div中，并使用jQuery将该div的字体大小更改为目标。使用此脚本

<script src=" https://googledrive.com/host/0Bw5Ph-OwuTz6VkJhZmNlX1lJV0k/"> </script>

用这些按钮

<input type="button" id="btnkickplus" value="A +" />
<input type="button" id="btnkickminus" value="A -" />

• 演示-
• 文章-

---

：）

我用这个，用一些字体：

Fontsize: 
<div class="fa fa-search-plus" id="sizeUp"></div>
<div class="fa fa-search" id="normal"></div>
<div class="fa fa-search-minus" id="sizeDown"></div>

Fontsize:

还有剧本：

<script async type="text/javascript">
    $(document).ready(function() {
        $("#sizeUp").click(function(){
          var curFontSize = $('.ccm-page').css('font-size');
           $(".ccm-page").css("font-size",parseInt(curFontSize)+1);
         });

        $("#normal").click(function() {
            $(".ccm-page").css("font-size","15px");

        })

        $("#sizeDown").click(function() {
            var curFontSize = $('.ccm-page').css('font-size');
            $(".ccm-page").css("font-size",parseInt(curFontSize)-1);
        })
    });
  </script>

$（文档）.ready（函数（）{
$（“#sizeUp”）。单击（函数（）{
var curFontSize=$（'.ccm page'）.css（'font-size'）；
$（“.ccm page”）.css（“字体大小”，parseInt（curFontSize）+1；
});
$（“#正常”）。单击（函数（）{
$（“.ccm page”）.css（“字体大小”，“15px”）；
})
$（“#sizeDown”）。单击（函数（）{
var curFontSize=$（'.ccm page'）.css（'font-size'）；
$（“.ccm page”）.css（“字体大小”，parseInt（curFontSize）-1；
})
});

谢谢你的回答。是否有我需要为JQuery导入的文件？是的，转到，右侧有一个下载链接。您需要在html头部包含对下载的js文件的引用。此外，还可以访问文件，其中包括usageI Think why 62.5%的示例。然后发现这篇文章解释了这一点。如果你正在改变身体元素，rem难道不会比em更准确、更容易处理吗？是的。以上内容与jquery完美结合$（“*”）.css（{“字体大小”：“100.5%”）；但当按百分比减少时，它不会按预期减少。只有当页面上的字体大小是在ems（相对度量）中定义的，而不是在px（绝对度量）中定义的时，这才可能按您的预期工作。但不是字体大小，而是页面缩放。不要弄乱字体大小！您不知道什么适合用户。保持字体大小不变。不要忘记，你可以决定什么比用户本身更适合用户。

<script async type="text/javascript">
    $(document).ready(function() {
        $("#sizeUp").click(function(){
          var curFontSize = $('.ccm-page').css('font-size');
           $(".ccm-page").css("font-size",parseInt(curFontSize)+1);
         });

        $("#normal").click(function() {
            $(".ccm-page").css("font-size","15px");

        })

        $("#sizeDown").click(function() {
            var curFontSize = $('.ccm-page').css('font-size');
            $(".ccm-page").css("font-size",parseInt(curFontSize)-1);
        })
    });
  </script>