脚本宝典收集整理的这篇文章主要介绍了jQuery实现调节字体大小案例,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
本文实例为大家分享了jquery实现调节字体大小的具体代码,供大家参考,具体内容如下
代码:
<!DOCTYPE htML> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="viewport" content="width=device-width, inITial-scale=1.0"> <title>设置字体</title> </head> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function() { $("span").click(function() { VAR cssFontSize = $("#para").css("font-size"); //获取字体大小 var fontSize = parseFloat(cssFontSize); //获取字体大小的值 var unit = cssFontSize.slice(-2); //获取字体大小的单位 var classname = $(this).attr("class"); if ("zoomIn" == className) { //放大字体 if (fontSize <= 22) { fontSize += 2; } } else if ("zoomOut" == className) { //缩小字体 if (fontSize >= 12) { fontSize -= 2; } } $("#para").css("font-size", fontSize + unit); }); }); </script> <!-- CSS --> <style type="text/css"> .zoomIn, .zoomOut { background: blue; cursor: pointer; } </style> </head> <!-- HTML --> <body> <div class="msg"> <div class="msg_caption"> <span class="zoomIn">放大</span> <span class="zoomOut">缩小</span> </div> <div> <p id="para"> jQuery是一个快速、简洁的JavaScript框架,是继PRototype之后又一个优秀的JavaScript代码库(框架)于2006年1月由John Resig发布。<br /> jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。<br /> 它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。<br /> jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的CSS选择器,并且可对CSS选择器进行扩展;<br /> 拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、opera 9.0+等 </p> </div> </div> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本宝典。
以上是脚本宝典为你收集整理的jQuery实现调节字体大小案例全部内容,希望文章能够帮你解决jQuery实现调节字体大小案例所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。