手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >通过JavaScript控制字体大小的代码
通过JavaScript控制字体大小的代码
摘要:为了此代码到您的网页必须使用像素大小的字体(PX),而不是相对大小的字体,使用“EM”或“%”。当然如果你使用其他字体单位的代码可以很容易地...

为了此代码到您的网页必须使用像素大小的字体(PX),而不是相对大小的字体,使用“EM”或“%”。当然如果你使用其他字体单位的代码可以很容易地适应这些。如果脚本不能找到一个段落的字体大小,它会默认为12px。

核心代码:

复制代码 代码如下:

var min=8;

var max=18;

function increaseFontSize() {

var p = document.getElementsByTagName('p');

for(i=0;i<p.length;i++) {

if(p[i].style.fontSize) {

var s = parseInt(p[i].style.fontSize.replace("px",""));

} else {

var s = 12;

}

if(s!=max) {

s += 1;

}

p[i].style.fontSize = s+"px"

}

}

function decreaseFontSize() {

var p = document.getElementsByTagName('p');

for(i=0;i<p.length;i++) {

if(p[i].style.fontSize) {

var s = parseInt(p[i].style.fontSize.replace("px",""));

} else {

var s = 12;

}

if(s!=min) {

s -= 1;

}

p[i].style.fontSize = s+"px"

}

}

包括上面的代码在您的网页(无论是放置在头部分,或将其放置在一个外部JS文件和进口)。然后可以调用的增加和减少象下面的字体大小的功能。

使用方法:

复制代码 代码如下:

<a href="javascript:decreaseFontSize();">-</a>

<a href="javascript:increaseFontSize();">+</a>

【通过JavaScript控制字体大小的代码】相关文章:

JavaScript编程学习技巧汇总

Javascript 字符串模板的简单实现

JavaScript 正则表达式中global模式的特性

JavaScript中this关键字使用方法详解

使用RequireJS优化JavaScript引用代码的方法

Javascript随机显示图片的源代码

Web开发必知Javascript技巧大全

javascript制作的滑动图片菜单

javascript实现youku的视频代码自适应宽度

JavaScript常用数组算法小结

精品推荐
分类导航