js 文字的放大缩小案例


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键字,关键词">
    <meta name="Description" content="描述和简介">
    <title>Titletitle>
    <style type="text/css">
        *{margin:0;padding:0;}
        body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
        a{text-decoration:none;}
        img{border:none;}
        ol,ul{list-style:none;}
        #box{
            width: 1000px;
            margin : 50px auto;
        }
        #box .btn{
            display: inline-block;
            width: 50px;
            height: 30px;
            background: #000;
            color: #fff;
            font-size: 20px;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }
        #box p{
            margin : 10px 0;
        }

    style>
head>
<body>
    <div id="box">
        <span id="add" class="btn">+span>
        <span id="del" class="btn">-span>
        <p>hahahap>
        <p>p>
        <img src="images/pic1.jpg" alt="">
        <p>demop>
        <p>早点起床,醒醒觉p>
        <img src="images/pic1.jpg" alt="">
    div>

    <script>
        var oAdd = document.getElementById("add"),
            oDel = document.getElementById("del"),
            oBox = document.getElementById("box"),
            size = 16;

        oAdd.onclick = function (){
            //size = size + 1;
            //size += 1;
            size ++;
            if( size > 26){
                alert("瓜皮,不能再调皮咯!");
                size = 26;
            };
            oBox.style.fontSize = size + "px";
        };
        oDel.onclick = function (){
           // size = size - 1;
           // size -= 1;
            size --;
            if( size < 16 ){
                alert("瓜皮,不能再调皮咯!");
                size = 16;
            }
            oBox.style.fontSize = size + "px";
        };
    script>
body>
html>

你可能感兴趣的:(js)