JQuery font size setting method

  • 2020-03-30 02:08:53
  • OfStack

Get the font size first and do the processing.

Save the modified value.

The slice() method returns the selected element from an existing array.
ArrayObject. Slice (start, end).
Start a necessity. Specify where to start. If it's a negative number, it specifies where to start from the end of the array. In other words, minus 1 means the last element, minus 2 means the penultimate element, and so on.

End    Optional. Specifies where to end the selection. This parameter is the array index at the end of the array fragment. If this parameter is not specified, the sharded array contains all elements from start to the end of the array. If this parameter is negative, it specifies the element that starts at the end of the array.

The jQuery code is as follows:


<script type="text/javascript">
    $(function(){
        $("span").click(function(){
            //Gets the font size of para
            var thisEle = $("#para").css("font-size"); 
            //The second argument to parseFloat represents the base of the transformation, and 10 represents the conversion to base 10
            var textFontSize = parseFloat(thisEle , 10);
            //Javascript comes with methods
            var unit = thisEle.slice(-2); //Access to the unit
            var cName = $(this).attr("class");
            if(cName == "bigger"){
                    textFontSize += 2;
            }else if(cName == "smaller"){
                    textFontSize -= 2;
            }
            //Set the font size of para
            $("#para").css("font-size",  textFontSize + unit );
        });
    });
  </script>

The HTML code is as follows:

<body>
<div class="msg">
    <div class="msg_caption">
        <span class="bigger" > amplification </span>
        <span class="smaller" > narrow </span>
    </div>
    <div>
        <p id="para" >
        This is some text. This is some text. This is some text. This is some text. This
        is some text. This is some text. This is some text. This is some text. This is some
        text. This is some text. This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text. This is some text. This
        is some text. This is some text.
        </p>
    </div>
</div>
</body>


Related articles: