jQuery 调整字体大小详解（firefox）

最新推荐文章于 2024-08-29 10:38:50 发布

最新推荐文章于 2024-08-29 10:38:50 发布 · 476 阅读

文章标签：

#jQuery #Firefox #CSS #JavaScript #XHTML #ViewUI

JQuery 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用JQuery实现的字体大小动态调整功能。通过点击按钮，可以增大或减小特定段落文字的字体大小。该功能利用了JQuery的css()函数来获取和设置元素的样式属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JQuery css函数测试</title>

$(document).ready(function(){

$('div .button' ).click(function(){ //注意之间有空格代表div 下有class为button的

var $duanluo=$('div.speech' ); //jQuery 变量存储段落信息 div.speech注意之间没有空格当然.speech也行

      var ziti=$duanluo.css('fontSize');                       //字体信息大小如：8px

      //alert(ziti);测试结果ziti是 8 px

      var ztdx=parseFloat(ziti,10) ;       //取以字母开头的字符串为     10   （第二个参数）进制数字

   //alert(ztdx);

      var unit= ziti.slice(-2);               //取字体信息的单位如：8px 中的px slice取字符串从倒数第二个开始取


      if (this.id=='switcher-large'){ztdx *= 1.4;}
      else if (this.id=='switcher-small'){ztdx/= 1.4;}

$duanluo.css('fontSize', ztdx + unit); //段落的css应用处理后的字体大小
});
});
</script>

</head>
<body>
<center><h1>JQuery css函数测试</h1></center>

   <spent class"label"> Stryle Switcher:</spent><br>                 //spent默认在同一行上所以用 <br>
   <spent class ="button" id ="switcher-large" > + 加大 + </spent><br> //用<div也行>
   <spent class ="button" id ="switcher-small" > - 减小 - </spent>