原生js控制字体大小示例
内容摘要
这篇文章主要为大家详细介绍了原生js控制字体大小示例，具有一定的参考价值，可以用来参考一下。
文章正文
这篇文章主要为大家详细介绍了原生js控制字体大小示例，具有一定的参考价值，可以用来参考一下。
上篇写到的是关于属性操作的更改添加等，那么今天通过一个简单的案例再来巩固一下更改属性值，有点类似控制新闻页面的文字大小。首先还是先看布局，简单写一句话，并写两个按钮： html代码如下：
<input id="Btn1" type="button" value="+" name=""/>
<input id="Btn2" type="button" value="-" name=""/>
<p id="p1" style="font-size:14px;">这是一些文字这是一些文字这是一些文字这是一些文字</p>效果图如下：然后，就要通过点击加减按钮来控制文字的大小了，js代码如下：
/**
* 原生js控制字体大小
*
* @param
* @arrange （www.idcnote.com）
**/
<script>
window.onload= function(){
var oPtxt=document.getElementById("p1");
var oBtn1=document.getElementById("Btn1");
var oBtn2=document.getElementById("Btn2");
var num = 14; /*定义一个初始变量*/
oBtn1.onclick = function(){
num++;
oPtxt.style.fontSize=num+'px';
};
oBtn2.onclick = function(){
num--;
oPtxt.style.fontSize=num+'px';
}
}
</script>点击“+”按钮一下，那么文字就会增加一像素，一直点击便会一直变大：点击“-”按钮一下，那么文字就会减小一像素，一直点击便会一直变小：就是这么的简单，一定要注意定义初始变量的时候，
一定要是全局变量，而你需要操作按钮才使文字有变化的话，那么变量的增加和减小就一定是局部变量。
注：关于原生js控制字体大小示例的内容就先介绍到这里，更多相关文章的可以留意
代码注释
作者：喵哥笔记
