字体放大或缩小案例

最新推荐文章于 2023-05-14 17:34:26 发布

李先坤

最新推荐文章于 2023-05-14 17:34:26 发布

阅读量177

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_43391261/article/details/127132875

版权

要求

使用点击事件制作文字放大或缩小案例
点击“-”按钮时，所有文字缩小2像素
点击“+”按钮时，所有文字放大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>Document</title>
    <style>
        .box {
            width: 400px;
            border: 2px solid black;
        }
    </style>
</head>

<body>
    <div class="box">
        <button>+</button>
        <button>-</button>
        <div class="tex">
            借助东西部科技合作机制，引导创新要素向西部汇集，为欠发达地区注入发展动能，这既是整体提升区域创新能力的内在要求，也是践行新发展理念的题中应有之义

            不久前，国家能源集团宁夏煤业年产400万吨的煤制油项目通过竣工验收。这是全球单体规模最大的煤炭间接液化项目，在关键技术、大型装备和材料制造等多个领域实现了“零”的突破。这一重大成果的取得，来自当地企业与浙江大学、天津大学等创新团队协同攻关，是东西部科技合作机制结出的新鲜果实。

            合力推动区域创新发展，东西部科技合作是重要抓手。“越是欠发达地区，越需要实施创新驱动发展战略”“欠发达地区可以通过东西部联动和对口支援等机制来增加科技创新力量”。科技创新是高质量发展的有力支点，我国东部地区科技资源丰富，借助东西部科技合作机制，引导创新要素向西部汇集，为欠发达地区注入发展动能，这既是整体提升区域创新能力的内在要求，也是践行新发展理念的题中应有之义。

            青海建成世界领先的电池及碳酸锂示范生产线，西藏有了青稞核心种子库和牦牛基因库，内蒙古稀土永磁产业研发和产业化达到国际一流水平……这些年，以科技为纽带，东西部牵手架起了一座座创新发展的协作桥梁。科技项目、技术和人才的持续滋养，让创新之花在西部地区绚丽绽放。从粮食增产、畜牧业增值到制造业升级，科技纽带帮助当地突破关键核心技术，推动新技术、新产品转化应用，带动地方特色产业迈向中高端。东西部科技合作成为欠发达地区创新驱动发展的杠杆，为缩小东西部差距、促进区域协调发展提供了支撑。
        </div>
    </div>
</body>

</html>
<script>
    var btn = document.getElementsByTagName('button');
    var tex = document.getElementsByClassName('tex')[0];
    var num = 16;
    btn[0].onclick = function () {
        num += 2;
        tex.style.fontSize = num + 'px';
    }
    btn[1].onclick = function () {
        num -= 2;
        // console.log(num);
        //谷歌默认最小字体为12
        if (num < 12) {
            alert('不能再小了');
            tex.style.fontSize = 12 + 'px';

        } else {
            tex.style.fontSize = num + 'px';
        }

    }
</script>