分别定义三个class为increaseFont、decreaseFont、resetFont 的元素。为其click事件添加事件
/*
对页面上的字体增大、缩小、恢复原始大小
需要在html页面中定义三个元素
元素的class分别为 resetFont、increaseFont、decreaseFont
在本文件的JQuery事件中分别定义了三个元素的click事件来实现增大、缩小、恢复原始大小
*/
$(function () {
//取得字体大小,在html标记下定义了font-size
var originalFontSize = $("html").css("font-size");
//恢复默认字体大小
$(".resetFont").click(function () {
$("html").css("font-size", originalFontSize);
//JavaScript不向下执行
return false;
});
//加大字体,某个元素的class定义为increaseFont
$(".increaseFont").click(function () {
//取得当前字体大小 后缀px,pt,pc
var currentFontSize = $("html").css("font-size");
//取得当前字体大小,parseFloat()转为float类型去除后缀
var currentFontSizeNumber = parseFloat(currentFontSize);
//新定义的字体大小
var newFontSize = currentFontSizeNumber * 1.1;
//重写样式表
$("html").css("font-size", newFontSize);
//JavaScript不向下执行
return false;
});
//减小字体,某个元素的class定义为decreaseFont
$(".decreaseFont").click(function () {
//取得当前字体大小 后缀px,pt,pc
var currentFontSize = $("html").css("font-size");
//取得当前字体大小,parseFloat()转为float类型去除后缀
var currentFontSizeNumber = parseFloat(currentFontSize);
//重新定义字体大小
var newFontSize = currentFontSizeNumber * 0.9;
//重写样式表
$("html").css("font-size", newFontSize);
//JavaScript不向下执行
return false;
});
});
分享到:
相关推荐
代码如下: /* 对页面上的字体增大、缩小、恢复原始大小 需要在html页面中定义三个元素 元素的class分别为 resetFont、increaseFont、decreaseFont 在本文件的JQuery事件中分别定义了三个元素的click事件来实现增大、...
jQuery滑杆改变页面和文字大小,供大家一起共同分享学习。
主要介绍了jquery实现实时改变网页字体大小、字体背景色和颜色的方法,涉及jquery使用css方法动态操作页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
4.12 动态调整页面的字体大小 第5章 jQuery实现用户输入自动完成功能 5.1 最简单的用户输入自动完成 5.2 使用远程数据源的自动完成 5.3 带缓存的自动完成 5.4 带滚动条的自动完成 5.5 Combobox风格的自动完成 5.6 ...
如果是静态的CSS,当然是可以直接写上去的,但有些界面是需要一些动态效果的,比如颜色变化,字体大小变化,甚至DIV 的隐藏于现实等,这些都需要用javascript 动态控制其CSS样式,下面就常用的jquery 控制 css 样式...
jQuery.filer 1.0 jQuery.filer - 简单的 HTML5 文件上传器,一个 jQuery 插件工具,它完全改变了文件输入并使其... 在您的 html 页面中包含 jquery.filer css 文件。 < link href =" ./css/jquery.filer.css " t
如果你想让一个 div 占据 75% 的宽度,你需要做的就是给它一个 75% 的宽度。... 这将找到字体大小的最佳位置,使该文本占据 75% 的宽度,并且它将绑定一个事件侦听器以确保它在窗口大小更改时发生更改。
OpenWest2015 中级 jQuery 第 2 部分 使用 Google Chrome 运行此网站 导航 下一张/上一张幻灯片/页面: Command-右箭头/ Command-左箭头或... 更改控制台字体大小: Control-Minus / Control-Plus 命令历史:向上/向下
更改字体大小 每个对象都可以调整大小 将所有画布数据序列化为JSON并重新绘制 删除单个对象 清除页面 导出带注释的PDF(使用jsPDF) 重要提示:导出的文件将是带有图像集的PDF。 因此,您将无法使用文本选择等功能...
- 修正一些字体大小 - 最大程度地消除了Chrome中的闪烁(需要新的API来做到这一点,所以扩展将需要额外的权限,虽然它只使用一个小部分) v.2.0.9 - 更均匀的按钮 - 弹出菜单显示更快/即时(Chrome) - 添加短...
基于jQuery的,对于标记,联系人列表,国家/地区选择器等很有用。 标志性的字体和CSS框架 模块 下一步是什么? 用Facebook注册 愿望清单功能 股票特征 如果24小时后没有确认,则自动取消订单 自定义订单号 地址...
3)修正4号与5号字体大小一样的BUG! 2009/06/15 Version 6.0.7 For VS2005/2008 Updates: 1)修正word导入功能中如果选择了保存word文档到服务器,那么下次相同的文件将不能再次导入的BUG! 2009/06/02 ...
3)修正4号与5号字体大小一样的BUG! 2009/06/15 Version 6.0.7 For VS2005/2008 Updates: 1)修正word导入功能中如果选择了保存word文档到服务器,那么下次相同的文件将不能再次导入的BUG! 2009/06/02 Version ...
注释的上下文菜单中的新命令可更改字体大小(以获得更多辅助功能)。 0.9版:快速搜索UI中的一些更改0.8版:与Google书签同步布局中的一些小问题。 改进的可用性。 0.6版:注释列表的上下文菜单已更改,因为以前的旧...
改变了标题文本的大小,更适合中文文本 增加文本行距样式 增加背加反色:反色的文字都为白色。 增加了边框、圆角样式 新增填充、边界样式大小 新增CSS动画效果 修改了图片的样式 重新定义了表单样式 表单...
5.修复后台服务器文件管理,文件总大小超过几G会出现页面程序错误BUG 6.完善后台JS复制事件 7.修复其他BUG (1~4更新点感谢白帽:seraph1984,通过乌云平台告知我们网钛。这些入侵漏洞只要有根据程序后台引导页提示...