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的父元 ...
随机推荐
- 广州PostgreSQL用户会技术交流会小记 2015-9-19
广州PostgreSQL用户会技术交流会小记 2015-9-19 今天去了广州PostgreSQL用户会组织的技术交流会 分别有两个session 第一个讲师介绍了他公司使用PostgreSQL-X2 ...
- ASP.NET Core Linux下为 dotnet 创建守护进程(必备知识)
前言 在上篇文章中介绍了如何在 Docker 容器中部署我们的 asp.net core 应用程序,本篇主要是怎么样为我们在 Linux 或者 macOs 中部署的 dotnet 程序创建一个守护进程 ...
- ORM数据层框架的设计热点:更新指定的列的几种设计方案
ORM框架的定义:对象-关系映射(Object/Relation Mapping,简称ORM) 常见的是:数据库结构=>映射Object(实体属性)=>基于实体类的操作. 还有一种:数据库 ...
- 剑指Offer面试题:20.栈的压入、弹出序列
一.题目:栈的压入.弹出序列 题目:输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1.2.3.4.5是某栈的压栈序列,序列4 ...
- 分析nuget源码,用nuget + nuget.server实现winform程序的自动更新
源起 (个人理解)包管理最开始应该是从java平台下的maven开始吧,因为java的开发大多数是基于开源组件开发的,一个开源包在使用时很可能要去依赖其他的开源包,而且必须是特定的版本才可以.以往在找 ...
- OData的初步认识
What – OData是什么? OData - Open Data Protocal,是一个设计和使用RESTful API的标准.REST本身只是一个构建web服务的思想和理念,其没有规定一个统一 ...
- JS实战 · 零碎笔记
onclick:单击时触发事件 onmouseover:鼠标进入时触发事件 onmouseout:鼠标离开时触发事件 事件三要素:最基础的内容 事件源:有监听的HTML 标签,能响应事件的HTML ...
- CentOS On VirtualBox
背景 后台开发需要随时与服务器交互,本人使用Mac开发.但是不愿意在Mac上直接安装redis以及mysql等等工具.所以选择在VirtualenvBox下安装一个服务器系统,并且使用ssh与其连接. ...
- 前端组件化Polymer入门教程(8)——事件
可以在listeners对象中监听事件 <x-custom></x-custom> <dom-module id="x-custom"> < ...
- 数据结构与算法JavaScript (四) 串(BF)
串是由零个或多个字符组成的有限序列,又叫做字符串 串的逻辑结构和线性表很相似的,不同的是串针对是是字符集,所以在操作上与线性表还是有很大区别的.线性表更关注的是单个元素的操作CURD,串则是关注查找子 ...