分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

原生js控制字体大小

发布时间:2023-09-06 01:25责任编辑:董明明关键词:js

上篇写到的是关于属性操作的更改添加等,那么今天通过一个简单的案例再来巩固一下更改属性值,有点类似控制新闻页面的文字大小。

首先还是先看布局,简单写一句话,并写两个按钮:

1 <input id="Btn1" type="button" value="+" name=""/>2 <input id="Btn2" type="button" value="-" name=""/>3 <p id="p1" style="font-size:14px;">这是一些文字这是一些文字这是一些文字这是一些文字</p>

效果图如下:

然后,就要通过点击加减按钮来控制文字的大小了,js代码如下:

 1 <script> 2 ????window.onload= function(){ 3 ????????var oPtxt=document.getElementById("p1"); 4 ????????var oBtn1=document.getElementById("Btn1"); 5 ????????var oBtn2=document.getElementById("Btn2"); 6 ????????var num = 14; /*定义一个初始变量*/ 7 ????????oBtn1.onclick = function(){ 8 ????????????num++; 9 ????????????oPtxt.style.fontSize=num+‘px‘;10 ????????};11 ????????oBtn2.onclick = function(){12 ????????????num--;13 ????????????oPtxt.style.fontSize=num+‘px‘;14 ????????}15 ????}16 </script>

点击“+”按钮一下,那么文字就会增加一像素,一直点击便会一直变大:

点击“-”按钮一下,那么文字就会减小一像素,一直点击便会一直变小:

就是这么的简单,一定要注意定义初始变量的时候,一定要是全局变量,而你需要操作按钮才使文字有变化的话,那么变量的增加和减小就一定是局部变量。

今天就到这里,明天继续!加油!

原生js控制字体大小

原文地址:http://www.cnblogs.com/web001/p/7846289.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved