jQuery实现调节字体大小案例

本文实例为大家分享了jQuery实现调节字体大小的具体代码，供大家参考，具体内容如下

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置字体</title>
</head>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">

    $(function() {
        $("span").click(function() {
            var cssFontSize = $("#para").css("font-size"); //获取字体大小
            var fontSize = parseFloat(cssFontSize); //获取字体大小的值
            var unit = cssFontSize.slice(-2); //获取字体大小的单位
            var className = $(this).attr("class");
            if ("zoomIn" == className) { //放大字体
                if (fontSize <= 22) {
                    fontSize += 2;
                }
            } else if ("zoomOut" == className) { //缩小字体
                if (fontSize >= 12) {
                    fontSize -= 2;
                }
            }
            $("#para").css("font-size", fontSize + unit);
        });
    });

</script>   

<!-- CSS -->
<style type="text/css">
    .zoomIn, .zoomOut {
        background: blue;
        cursor: pointer;
    }
</style>
</head>

<!-- HTML -->
<body>
  <div class="msg">
      <div class="msg_caption">
          <span class="zoomIn">放大</span>
          <span class="zoomOut">缩小</span>
      </div>
      <div>
          <p id="para">
              jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。<br />
              jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。<br />
              它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。<br />
              jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；<br />
              拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

          </p>
      </div>
  </div>

</body>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JQuery 改变页面字体大小的实现代码(实时改变网页字体大小)

    复制代码 代码如下: /* 对页面上的字体增大.缩小.恢复原始大小 需要在html页面中定义三个元素 元素的class分别为 resetFont.increaseFont.decreaseFont 在本文件的JQuery事件中分别定义了三个元素的click事件来实现增大.缩小.恢复原始大小 */ $(function () { //取得字体大小,在html标记下定义了font-size var originalFontSize = $("html").css("font-si

  • jQuery实现自动调整字体大小的方法

    本文实例讲述了jQuery实现自动调整字体大小的方法.分享给大家供大家参考.具体分析如下: 这里使用一个jQuery函数,自动更改元素中的文本的字体大小. $.fn.fontfit = function(max) { var max_size = 18; if (typeof(max) == "undefined") max = max_size; $(this).wrapInner('<div id="fontfit"></div>');

  • jQuery实现切换字体大小的方法

    本文实例讲述了jQuery实现切换字体大小的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: $.fn.switchSize = function(settings) { // defaults settings settings = $.extend({     container: 'body',     arrSizeClass: ['small', 'medium', 'large'],     defaultClass: 'medium',     saveCook

  • jQuery动态修改字体大小的方法【测试可用】

    jQuery动态修改字体大小的方法【测试可用】

    本文实例讲述了jQuery动态修改字体大小的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 完整代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> * { margin:0; padding:0; } .msg

  • jQuery之字体大小的设置方法

    先获取字体大小,进行处理. 再将修改的值保存. slice() 方法可从已有的数组中返回选定的元素.arrayObject.slice(start,end).start 必需.规定从何处开始选取.如果是负数,那么它规定从数组尾部开始算起的位置.也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推. end   可选.规定从何处结束选取.该参数是数组片断结束处的数组下标.如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素.如果这个参数是负数,那么它规定的是从数组

  • jquery更换文章内容与改变字体大小代码

    复制代码 代码如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script language="javascript教程" src="到jquery官网下载jquery文件.js"></script>

  • jquery实现实时改变网页字体大小、字体背景色和颜色的方法

    jquery实现实时改变网页字体大小、字体背景色和颜色的方法

    本文实例讲述了jquery实现实时改变网页字体大小.字体背景色和颜色的方法.分享给大家供大家参考.具体如下: 这里使用jquery实时改变字体大小.字体背景色和颜色,JQUERY让很多事变得更简单,确实是个实用的小插件,对JQ不熟悉的朋友,平时可要多看一些实例啦,比如现在这一个小实例,你可以从中学习到不少知识点的哦. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  • jQuery实现调节字体大小案例

    jQuery实现调节字体大小案例

    本文实例为大家分享了jQuery实现调节字体大小的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v

  • Goland调节字体大小的设置(编辑区,terminal区,页面字体)

    Goland调节字体大小的设置(编辑区,terminal区,页面字体)

    1.调节页面字体 File->Settings->Editor->Font 2.调节代码编辑区字体 Setting->Editor->Color Scheme->Console Scheme Font 3.调节terminal区字体 Setting->Editor->Color Scheme->Console Font 若不生效,重启一下IDE即可. 补充:goland通过鼠标字体进行放大缩小 如下所示: 以上为个人经验,希望能给大家一个参考,也希望大

  • IDEA/WebStorm/Pycharm鼠标滚轮ctrl+滚轮-调节缩放字体大小

    IDEA/WebStorm/Pycharm鼠标滚轮ctrl+滚轮-调节缩放字体大小

    先看下IDEA/WebStorm/Pycharm鼠标滚轮ctrl+滚轮-调节字体大小,文章底部给大家提到了缩放字体大小的设置方法,耐心看完此文哈~ 由于Idea/webstorm/pycharm都是一家公司的,因此设置的操作也一样: 首先设置settings: 找到editor编辑器的general 通用: 选项如下,进行打勾 并且点击右下角的apply应用,否则不会生效: 这样就可以进行正常的习惯CTRL+滚轮 调节字体的font size 了 下面接着看下IDEA Pycharm  Webs

随机推荐