jQuery implements font size adjustment case

This article shares the specific code of jQuery to adjust the font size for your reference. The specific content is as follows

Code:

<!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>Set font</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"); //Get the font size var fontSize = parseFloat(cssFontSize); //Get the value of the font size var unit = cssFontSize.slice(-2); //Get the unit of the font size var className = $(this).attr("class");
            if ("zoomIn" == className) { //Enlarge the font if (fontSize <= 22) {
                    fontSize += 2;
                }
            } else if ("zoomOut" == className) { //Reduce the font 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">Zoom in</span>
          <span class="zoomOut">Zoom Out</span>
      </div>
      <div>
          <p id="para"> 
              jQuery is a fast and concise JavaScript framework. It is another excellent JavaScript code library (framework) after Prototype and was released by John Resig in January 2006. <br />
              The design principle of jQuery is "write Less, Do More", which advocates writing less code and doing more things. <br />
              It encapsulates commonly used JavaScript functional codes and provides a simple JavaScript design mode to optimize HTML document operations, event processing, animation design and Ajax interaction. <br />
              The core features of jQuery can be summarized as: unique chain syntax and short, clear and multi-functional interface; efficient and flexible CSS selectors, and the ability to expand CSS selectors; <br />
              It has a convenient plug-in extension mechanism and rich plug-ins. jQuery is compatible with various mainstream browsers, such as IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+, etc.</p>
      </div>
  </div>
  
</body>
 
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

jQuery method to dynamically change font size [test available]
How to use jQuery to change the font size, font background color and color of a web page in real time
How to use jQuery to automatically adjust font size
How to switch font size using jQuery
How to set the font size in jQuery
jQuery code to change article content and font size
JQuery implementation code for changing page font size (changing web page font size in real time)

<<: Detailed tutorial for installing winx64 under mysql8.0.18 (with pictures and text)

>>: Implementation of Nginx forwarding matching rules