案例：使用不同的字体切换文本

最新推荐文章于 2024-05-17 13:52:13 发布

炒鸡蛋44

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量902

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_55643605/article/details/121276350

版权

在页面中完成下列的操作

1. 点击字号按钮时，切换文本的字体大小

2. 在切换文本字体大小时，字号按钮获取焦点

<!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>使用不同的字体切换文本</title>
    <style>
    .focus{
        text-decoration: none;
        color:#f00;
    }
    #p1{
        width:200px;
    }
</style>
</head>
<body>
    <a href="javascript:;">大</a>
    <a href="javascript:;">中</a>
    <a href="javascript:;" class="focus">小</a>
    <p id="p1" style='font-size: 16px;'>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente doloremque tenetur fugiat ullam optio sed explicabo necessitatibus voluptatibus earum consectetur, praesentium mollitia omnis voluptatem quam enim quibusdam dolorum voluptate laudantium!
    </p>
    <script>
        var anchors = document.getElementsByTagName('a');
        for(var i=0;i<anchors.length;i++){
            anchors[i].onclick = function(){
                // console.log(anchors[i])->>underfined
                // function是在点击时才会执行 待执行时i=3
                // this指代当前调用函数的页面函数
                console.log(this.innerText);
                changeFontSize(this.innerText);
                // 清除全部a的样式focus
                anchors[0].removeAttribute('class');
                anchors[1].removeAttribute('class');
                anchors[2].removeAttribute('class');
                // 为当前a添加focus
                this.setAttribute('class', 'focus');
            }
        }

        function changeFontSize(key) {
            var p = document.getElementById('p1')
            switch(key){
                case '大':p.setAttribute('style', 'font-size:32px');
                break;
                case '中':p.setAttribute('style', 'font-size:24px');
                break;
                case '小':p.setAttribute('style', 'font-size:16px');
                break;
            }
        }
    </script>
</body>
</html>