欢迎光临
我们一直在努力

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

这是一段点击按钮增大文字的字号与减小字号的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>

 

赞(0) 打赏
未经允许不得转载:新起点博客 » JS鼠标点击放大/减小字号的代码

评论 抢沙发

评论前必须登录!