jQuery之字体大小的设置方法 - Web前端
作者:98wpeu发布时间:2026-05-22分类:网页前端技术浏览:110
先获取字体大小,进行处理。
再将修改的值保存。
slice() 方法可从已有的数组中返回选定的元素。
ArrayObject.slice(start,end)。
start 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。
JQuery代码如下:
复制代码 代码如下:
<scripttype="text/javascript">
$(function(){
$("span").click(function(){
//获取para的字体大小
varthisEle = $("#para").CSS("font-size");
//parseFloat的第二个参数表示转化的进制,10就表示转为10进制
var textfontsize = parseFloat(thisEle , 10);
//JavaScript自带方法
var unit = thisEle.slice(-2); //获取单位
var cName = $(this).attr("class");
if(cName == "bigger"){
textFontSize += 2;
}else if(cName == "smaller"){
textFontSize -= 2;
}
//设置para的字体大小
$("#para").css("font-size", textFontSize + unit );
});
});
</script>
html代码如下:
复制代码 代码如下:
<body>
<div class="msg">
<div class="msg_caption">
<span class="bigger" >放大</span>
<span class="smaller" >缩小</span>
</div>
<div>
<p id="para" >
This is some text. This is some text. This is some text. This is some text. This
is some text. This is some text. This is some text. This is some text. This is some
text. This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text. This
is some text. This is some text.
</p>
</div>
</div>
</body>
相关推荐
- jquery中 $.expr使用实例介绍 - Web前端
- jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转) - Web前端
- jQuery 选择表格(table)里的行和列及改变简单样式 - Web前端
- 30个让人兴奋的视差滚动(Parallax Scrolling)效果网站 - Web前端
- html中的input标签的checked属性jquery判断代码 - Web前端
- 基于jQuery的计算文本框字数的代码 - Web前端
- 30个让人兴奋的视差滚动(Parallax Scrolling)效果网站 - Web前端
- jQuery 右下角滑动弹出可关闭重现层完整代码 - Web前端
- JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载 - Web前端
- jQuery 联动日历实现代码 - Web前端
- 网页前端技术排行
-
- 1[Web前端]用javascript实现默认图片替代未显示的图片 - Web前端
- 2分析Iconfont-阿里巴巴矢量常用图标库 - Web前端
- 3基于jquery的滚动条滚动固定div(附演示下载) - Web前端
- 4【第六章】Foundation之按钮和下拉功能 - Web前端
- 5jQuery实例教程:制作网页中可折叠的面板 - Web前端
- 6jQuery编写widget的一些技巧分享 - Web前端
- 7jQuery实现鼠标移到元素上动态提示消息框效果 - Web前端
- 8在Mac/PC上远程调试iPhone/iPad上的网页 - Web前端
- 9分享精心挑选的12款优秀jQuery Ajax分页插件和教程 - Web前端
- 最近发表
-
- WordPress随机显示特色图片插件:Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案:坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP:Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性


