js实现动态改变字体大小代码

本文为大家介绍下使用js如何实现动态改变字体大小，有需要的额朋友可以参考一下，希望对大家有所帮助！

复制代码代码如下:

<!DOCTYPE html>

<html>

<head>

<title>修改字体大小.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">



<style type="text/css">

p{

border:1px red solid;

width:455px;

font-size:16px;

}

.max{

font-size:20px;

}

.moren{

font-size:16px;

}

.min{

font-size:12px;

}

</style>

<script type="text/javascript">

//此种方式降低了js和CSS的耦合性

function changeFontSize(fontStyle){

// 获取节点对象

var pNode = document.getElementsByTagName("p")[0];

// 设置该节点的Name属性以及属性值

pNode.className=fontSize;

}

/*

function changeFontSize2(fontSize){

// 获取节点对象

var pNode = document.getElementsByTagName("p")[0];

pNode.style.fontSize=fontSize;

}

*/

</script>

</head>

<body>

<a href="javascript:void(0)" onclick="changeFontSize2('20px')" class="max">大号</a>

<a href="javascript:void(0)" onclick="changeFontSize2('16px')" class="moren">中号</a>

<a href="javascript:void(0)" onclick="changeFontSize2('12px')" class="min">小号</a>

<p>

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小<br/>

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小<br/>

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小<br/>

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小<br/>

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小<br/>

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小<br/>

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小<br/>

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小<br/>

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小<br/>

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小<br/>

这里呢就是显示的文字，通过点击上面的超链接改变此字体大小<br/>

</p>

</body>

</html>

上一篇：使用js完成节点的增删改复制等的操作
下一篇：js创建元素（节点）示例