JS鼠标点击放大/减小字号的代码

原创 新起点博客  2020-07-10 10:02 
【上云必备】上云仅?102/年

这是一段点击按钮增大文字的字号与减小字号的JS代码,非常实用,小说站必备。也可用于网站内容页内。

点击文字放大减小源码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>JS点击加大/减小字号的代码_其它代码_JS代码</title>
        <meta name="keywords" content="加大,减小,字号,字体" />
        <meta name="description" content="这是一段点击按钮增大文字的字号与减小字号的JS代码,非常实用,小说站必备" />
        <style type="text/css">
@charset "utf-8";
/* CSS Document */

*{
    margin: 0;
    padding: 0;
}
.text{
    width: 200px;
    height: 100px;
    color: #fff;
    font-size: 16px;
    padding: 16px;
    background: #19ABB7;
}
#p_one{
    display: block;
    position: relative;
}
#p_two{
    display: block;
}
input{
    text-align: center;
}
#wrap {width: 400px; margin: 30px auto;}
#wrap input:nth-child(1),#wrap input:nth-child(3){
    width: 50px;
}
        </style>
    </head>
    <body>
<div id="wrap">
        <div class="text" id="text">
            <p id="p_one">鼠标点击文字放大可以用作小说,文字的放大效果</p>
        </div>
        <form >
           <input type=button value="A-" onClick="A_one()">
           <input type="text" name="box" id="box" value="16" size=4>
           <input type=button value="A+" onClick=" A_two()" >
        </form>
    </div>
<script>
        var Size=16;
        var BoxSize=document.getElementById("box");
        var Box=document.getElementById("box").value;
        var text=document.getElementById("text");
        function A_one(){
            if(Size===15){
                return;
            }
            else{
                Size--;
                BoxSize.value=Size;
                text.style.fontSize=Size+"px";
            }
        };
        function A_two(){
            if(Size===22){
                return;
            }
            else{
                Size++;
                BoxSize.value=Size;
                text.style.fontSize=Size+"px";
            }
        };
    </script>
    </body>
</html>

 

本文地址:https://www.henenseo.com/archives/2876
关注我们:请关注一下我们的微信公众号:扫描二维码新起点博客的公众号,公众号:xinqidian129
版权声明:本文为原创文章,版权归 新起点博客 所有,欢迎分享本文,转载请保留出处!
宝塔服务器面板,一键全能部署及管理,送你3188元礼包,点我领取
【腾讯云】海外1核2G服务器低至2折,半价续费券限量免费领取!

发表评论


表情