JavaScript 控制字体大小设置
在做公司的官网的时候,新闻内页会有一个让浏览者自己调整文字大小的功能,因此在这个空闲时间,把这个功能整理下来:
function setFontSize (id,content,params){
var oTarget = document.getElementById(id),
content = document.getElementById(content),
size = params.size || 14,
maxSize = params.maxSize || 20,
step = params.step || 2;
oBtn = '<input type="button" value="+"/><input type="button" value="-" />';
oBtn1 = null,
oBtn2 = null;
oTarget.innerHTML = oBtn;
oBtn1 = oTarget.childNodes[0];
oBtn2 = oTarget.childNodes[1];
oBtn1.onclick=function(){
if(size+step <= maxSize){
size+=step;
}else{
size = maxSize;
this.className+=' disabled';
this.disabled = true;
}
oBtn2.className.replace('disabled','');
oBtn2.disabled = false;
content.style.fontSize = size +'px';
}
oBtn2.onclick=function(){
if(size-step >= 12){
size-=step;
}else{
size = 12;
this.className+=' disabled'
this.disabled = true;
}
oBtn1.className.replace('disabled','');
oBtn1.disabled = false;
content.style.fontSize = size +'px';
}
}
调用方式:
setFontSize(id,contentid,{size:,maxSize,step:});
/*
* id :用于存放增加或减小两个按钮的父级盒子的id。
* contentid: 存放内容的id。
* {} 一个对象,用于提供设置的参数。
|— szie : 字体起始(默认)大小。
|— maxSize : 最大字体。
|— step : 增长的步长值。
*/
提示:可以通过font-size:0的方式来隐藏Input元素的value值,然后自定义按钮的样式。
JavaScript 控制字体大小设置的更多相关文章
- Pycharm用鼠标滚轮控制字体大小的
Pycharm用鼠标滚轮控制字体大小的 一.pycharm字体放大的设置 File —> setting —> Keymap —>在搜寻框中输入:increase —> I ...
- (转)Pycharm用鼠标滚轮控制字体大小
转自: Pycharm用鼠标滚轮控制字体大小 - 暗黒骑士 - 博客园 https://www.cnblogs.com/fyknight/p/6937482.html ---------------- ...
- eclipse护眼颜色和字体大小设置
♣eclipse护眼颜色和关键字颜色设置 ♣eclipse字体大小设置(包括jsp , .xml ,.java) 1.Eclipse字体大小调整: 窗口(Window)-首选项(Preferences ...
- eclipse中的字体大小设置和背景色设置
1.字体大小设置 在basic下选择最后一个TextFont 护眼背景色设置 添加到自定义颜色后点确定 最后一步点apply
- html页面控制字体大小的js代码
dom对象控制显示文章字体大小的js代码 <head> <script type="text/javascript"> function check(siz ...
- vue中利用scss实现整体换肤和字体大小设置
一.前言 利用Sass预处理实现换肤和字体大小调整. 思路及达到的效果:字体大小的适配使用window.devicePixelRatio的值和需要调整的差量进行控制.页面初始化是的字体适配可以根据de ...
- Eclipse字体大小设置
打开Eclipse,在主界面下Window->Preferences->General->Appearance->Colors and Fonts, 然后在右边展开框Basic ...
- CSS字体大小设置时的参考(转)
from:http://blog.sina.com.cn/s/blog_51cd580b0100gg6y.html font-size 设置的绝对关键字: 以下几个绝对字体大小的设置是有效的.当然他们 ...
- css字体大小设置em与rem的区别
em 单位em是相对于父元素的,如果父元素没有设置字体大小,那就会追溯到body. 比如 如果我在box_text的父元素box加了一个字体大小 那么body的8px就会被box_text的父元 ...
随机推荐
- 【三】用Markdown写blog的常用操作
本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...
- 在windows上如何安装python web引擎jinja2
首先要把你的Python文件夹加到环境变量里头去.假设你的Python文件夹位于C:\Python34,那么你需要打开CMD并输入: SETX PATH "%path%;C:\Python3 ...
- 安卓动态调试七种武器之离别钩 – Hooking(下)
0x00 序 随着移动安全越来越火,各种调试工具也都层出不穷,但因为环境和需求的不同,并没有工具是万能的.另外工具是死的,人是活的,如果能搞懂工具的原理再结合上自身的经验,你也可以创造出属于自己的调试 ...
- 【安装PHP】如何在openSUSE42.1下编译安装PHP7
首先推荐一篇文章PHP 7 Release Date Arrived: Will Developers Adopt PHP 7? - PHP Classes blog. 里面说到是否会去使用PHP7, ...
- Lesson 4 An existing trip
Text I have just received a letter from my brother,Tim. He is in Australia. He has been there for si ...
- 探索C#之虚拟桶分片
阅读目录 背景 虚拟桶(virtual buckets) 实现 总结 背景 关于数据分片讨论最多的是一致性hash,然而它并不是分布式设计中的银弹百试百灵. 在数据稳定性要求比较高的场景下它的缺点是不 ...
- Vivado SDK 2014.2 创建新工程后,BSP版本不对的解决办法
问题描述如下: 1. 使用Vivado SDK 2014.2已经创建了工程,但是此时,hdf文件增加了外设,需要重新创建工程以更新SDK中的外设描述: 2. 使用新的hdf创建工程后,发现system ...
- Hibernate 3.3.2 文档翻译 Day01
Hibernate 3.3.2 文档翻译 翻译人:微冷的雨 第一次书写:2015年11月29日 本人呕心沥血之作,请细心阅读领悟! Day01-1.1 项目描述 微冷的雨翻译:例如,我们将要建立一个可 ...
- 《第一本docker书》—— 读后总结
关于docker 这本书其实并没有读完,只不过最近工作比较繁忙,也无心再看这些用不到的书.以后要是工作需要,再仔细学习吧. 这次的阅读算是达到目的了,对docker有了一定的了解.它的作用.意义以及大 ...
- 导入镜像文件,分区启动liunx
1:更改虚拟机配置 2:导入系统镜像 3:启动虚拟机,选择第一个选项回车 4:这里问你是否检查镜像,我们的镜像肯定没问题不需要检查,点击Skip 5:语言选择,按提示默认下一步 6:主机名也默认 7: ...