在javascript中,可以使用style对象的fontsize属性来改变字体大小,该属性可以设置文本的字体大小,语法格式“元素对象.style.fontsize=值”。
本教程操作环境:windows7系统、javascript1.8.5版、dell g3电脑。
在javascript中,可以使用style对象的fontsize属性来改变字体大小。
下面我们通过示例来看看fontsize属性是怎么改变字体大小的。
首先还是先看布局,简单写一句话,并写两个按钮:
<input id="btn1" type="button" value="+" name=""/><input id="btn2" type="button" value="-" name=""/><p id="p1" style="font-size:14px;">这是一些文字这是一些文字这是一些文字这是一些文字</p>
效果图如下:
然后,就要通过点击加减按钮来控制文字的大小了,js代码如下:
<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>
点击“+”按钮一下,那么文字就会增加一像素,一直点击便会一直变大:
点击“-”按钮一下,那么文字就会减小一像素,一直点击便会一直变小:
就是这么的简单,一定要注意定义初始变量的时候,一定要是全局变量,而你需要操作按钮才使文字有变化的话,那么变量的增加和减小就一定是局部变量。
【相关推荐:javascript学习教程】
说明:html dom style fontsize 属性
fontsize属性设置或返回文本的字体大小。
语法:
返回fontsize属性:
object.style.fontsize
设置fontsize属性:
object.style.fontsize = "value"
属性值:
值描述
xx-smallx-smallsmallmediumlargex-largexx-large 将字体大小设置为不同的固定大小,从xx-small到xx-large
smaller 将字体大小减少一个相对单位
larger 将字体大小增加一个相对单位
length 以长度单位定义字体大小
% 将font-size设置为父元素字体大小的%
更多编程相关知识,请访问:编程视频!!
以上就是javascript怎么改变字体大小的详细内容。