css html js 文字大中小字体切换-CFANZ编程社区

css html js 文字大中小字体切换
css html js 文字大中小字体切换_i++
<!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>Document</title>
    <style>
        #fs {
            width: 260px;
            border: solid 1px #ccc;
            padding: 10px;
        }

        .focus {
            color: black;
            text-decoration: none;
        }

        a {
            color: blue;
        }
    </style>
</head>

<body>
    <div id="fs">
        <div class="title">
            <a href="javascript:;">大</a>
            <a href="javascript:;">中</a>
            <a href="javascript:;" class="focus">小</a>
        </div>
        <p id="p1">
            潘金莲，据说为贝州（恩州）知州家的千金小姐，清河县黄金庄人。和武大郎恩恩爱爱，白头到老，先后生下4个儿子。相传，她择嫁武大郎，成了贤内助，使武植越发勤奋而终于进士及第。夫妻俩恩爱得很，生有四子，白头偕老。阳谷清河一带，流传潘金莲这位贤妻良母的懿行佳话
    </div>
</body>

</html>

<script>


    var links = document.getElementsByTagName('a')
    var p1 = document.getElementById('p1');

    for (var i = 0; i < links.length; i++) {
        links[i].onclick = function () {
            this.className = 'focus'
            removeOther(this)
            if (this.innerHTML == '小') {
                p1.style.fontSize = '16px';
            } else if (this.innerHTML == '中') {
                p1.style.fontSize = '18px';
            } else if (this.innerHTML == '大') {
                p1.style.fontSize = '20px';
            }
        }
    }
    function removeOther(obj) {
        for (var i = 0; i < links.length; i++) {
            if (obj != links[i]) {
                links[i].removeAttribute('class')
            }
        }
    }

</script>
0 条评论