如何通过JavaScript调整网页元素的字体大小？

本文共计718个文字，预计阅读时间需要3分钟。

在JavaScript中，可以使用`style`对象的`fontSize`属性来改变字体大小。该属性可以设置文本的字体大小，格式如下：`元素对象.style.fontSize=值`。例如，要将某个元素的字体大小设置为16像素，可以这样写：`document.getElementById('id').style.fontSize='16px';`。

操作环境：Windows 7系统、JavaScript 1.8.5版本。

在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>

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

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

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

说明：HTML DOM Style fontSize 属性

fontSize属性设置或返回文本的字体大小。

语法：

• 返回fontSize属性：

object.style.fontSize

• 设置fontSize属性：

object.style.fontSize = "value"

属性值：

值描述

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

将字体大小设置为不同的固定大小，从xx-small到xx-largesmaller将字体大小减少一个相对单位larger将字体大小增加一个相对单位length以长度单位定义字体大小%将font-size设置为父元素字体大小的％

更多编程相关知识，请访问：编程视频！！

以上就是javascript怎么改变字体大小的详细内容，更多请关注自由互联其它相关文章！