可调整的字体大小设置

在做公司的官网的时候,新闻内页会有一个让浏览者自己调整文字大小的功能,因此在这个空闲时间,把这个功能整理下来:

 1     function setFontSize (id,content,params){
 2             var oTarget = document.getElementById(id),
 3                 content = document.getElementById(content),
 4                 size = params.size || 14,
 5                 maxSize = params.maxSize || 20,
 6                 step = params.step || 2;
 7                 oBtn = ‘<input type="button" value="+"/><input type="button" value="-" />‘;
 8                 oBtn1 = null,
 9                 oBtn2 = null;
10
11                 oTarget.innerHTML = oBtn;
12                 oBtn1 = oTarget.childNodes[0];
13                 oBtn2 = oTarget.childNodes[1];
14
15                 oBtn1.onclick=function(){
16                     if(size+step <= maxSize){
17                         size+=step;
18                     }else{
19                         size = maxSize;
20                         this.className+=‘ disabled‘;
21                         this.disabled = true;
22                     }
23                     oBtn2.className.replace(‘disabled‘,‘‘);
24                     oBtn2.disabled = false;
25                     content.style.fontSize = size +‘px‘;
26                 }
27                 oBtn2.onclick=function(){
28                     if(size-step >= 12){
29                         size-=step;
30                     }else{
31                         size = 12;
32                         this.className+=‘ disabled‘
33                         this.disabled = true;
34                     }
35                     oBtn1.className.replace(‘disabled‘,‘‘);
36                     oBtn1.disabled = false;
37                     content.style.fontSize = size +‘px‘;
38             }
39     }

调用方式:

1 setFontSize(id,contentid,{size:,maxSize,step:});
2 /*
3   * id :用于存放增加或减小两个按钮的父级盒子的id。
4   * contentid: 存放内容的id。
5   * {} 一个对象,用于提供设置的参数。
6          |— szie : 字体起始(默认)大小。
7          |— maxSize : 最大字体。
8          |— step : 增长的步长值。
9 */

提示:可以通过font-size:0的方式来隐藏Input元素的value值,然后自定义按钮的样式。

时间: 2024-10-13 23:59:25

可调整的字体大小设置的相关文章

IOS UIWenView 调整页面字体大小

IOS UIWenView 调整页面字体大小 IOS UIWenView 调整页面字体大小,示例如下: FontSizeChangeViewController.h #import <UIKit/UIKit.h> @interface FontSizeChangeViewController : UIViewController{ UIToolbar *toolBar; } @property (weak, nonatomic) IBOutlet UIWebView *webDetails;

移动端rem布局,用户调整手机字体大小或浏览器字体大小后导致页面布局出错问题

一.用户修改手机字体设置大小,影响App里打开的web页面. 手机字体设置大小,影响App的页面.Android的可以通过webview配置webview.getSettings().setTextZoom(100)就可以禁止缩放,按照百分百显示. 二.用户调整浏览器字体大小,影响的是从浏览器打开的web页 浏览器设置字体大小,影响浏览器打开的页面.通过js可控制用户修改字体大小,使页面不受影响. (function(doc, win) { // 用原生方法获取用户设置的浏览器的字体大小(兼容i

关于界面尺寸和字体大小设置良好交互的介绍

一篇非常好的文章介绍界面尺寸和字体大小设置:http://www.wzsky.net/html/Photo/app/121916.html

Eclipse字体大小设置

打开Eclipse,在主界面下Window->Preferences->General->Appearance->Colors and Fonts, 然后在右边展开框Basic->Text Font,选择Edit,改变字体大小.这里设置的字体大小将应用于所有文件. 在右边展开框中Java->Java Editor Text Font,选择Edit,改变字体大小.这里设置的字体大小将应用于Java编辑框.java文件中代码的字体大小,覆盖Basic->Text Fo

html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式

对于动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿... 我在做移动端网页时,总是和美工设计的页面有出入,主要还是由于双方对移动端HTML5实现页面还了解还不够. 今天就研究一下各大互联网公司对于移动端页面的处理方式. 主要研究对象:BAT(度娘,阿狸,企鹅)这几家的移动端网站或webapp 主要研究点:viewport的设置,字体的设置,图片原始宽高设置 汝甚吊

系统字体大小设置

问题: 在项目中遇到需要修改字体大小的问题.当修改设置里面字体大小的时候,根据情况决定当前应用是否需要同步系统的字体大小.一般在需要完整显示字体的应用中有此需求.华为荣耀的手机桌面似乎就针对这个做了判断,不管系统字体修改成什么样,似乎都是一个默认值,反正我是没有用肉眼看到有什么改变.虽然有点固定,但是好歹也整成了可以完整显示应用名称了. 分析: 在设置中既然有该功能,那么我们就进去看看他的代码了.设置界面对于的xml为Settings_headers.xml,一般这个地方比较难找,新手一般只需要

eclipse中的字体大小设置和背景色设置

1.字体大小设置 在basic下选择最后一个TextFont 护眼背景色设置 添加到自定义颜色后点确定 最后一步点apply

eclipse文档字体大小设置

步骤如下 eclipse文档字体大小设置 原文地址:https://www.cnblogs.com/xiaostudy/p/9285652.html

如何调整eclipse字体大小

现在本本屏幕越来越小, 在上面运行eclipse就会显得字体小, 那么如何调整字体大小那?方法一:    打开菜单 window->preferences->general->appearance->colors and fonts打开basec里面的text font 进行编辑会弹出一个字体编辑的窗口, 在里面调整字体即可. 方法二:    因为eclipse版本众多,所以菜单路径也会有所差异. 还有一种方法可以不用担心不同版本的差异:    开始先打开菜单 window->