4.1.1 设置计算的样式属性值

发表于 更新于 分类于 ， Waline： 本文字数： 3.8k 阅读时长 ≈ 3 分钟

4.1.1 设置计算的样式属性值

如果每次都增大或减小为预定的值,那么仍然可以使用.addClass()方法。但是,这次假设我们希望每单击一次按钮,文本的字体大小就会持续地递增或递减。虽然为每次单击定义一个单独的类,然后迭代这些类也是可能的,但更简单明了的方法是每次都以当前字体大小为基础,按照一个设定的系数(例如40%)来递增字体大小。
同以前一样,我们的代码仍然是从$(document).ready()和$('#switcher-large').click()事件处理程序开始,参见代码清单4-1。

1
2
3
4
$(document).ready(function() { 
  $('#switcher-large').click(function() { 
  }); 
});

接着,通过$('div.speech').css('fontSize')可以轻而易举地取得当前的字体大小。不过,由于返回的值中包含数字值及其单位(px),需要去掉单位部分才能执行计算。同样,在需要多次使用某个jQuery对象时,最好也把这个对象保存到一个变量中,从而达到缓存数据的目的。为此,就需要引入两个变量,参见代码清单4-2。

1
2
3
4
5
6
$(document).ready(function() { 
  var $speech = $('div.speech'); 
  $('#switcher-large').click(function() { 
    var num = parseFloat($speech.css('fontSize')); 
  }); 
});

$(document).ready()中的第一行代码把<div class="speech">保存到一个变量中。注意变量名$speech中的$。由于$是JavaScript变量中合法的字符,因此可以利用$来提醒自己该变量中保存着一个jQuery对象。与PHP等编程语言不同,$符号在jQuery或者说JavaScript中没有特殊的含义。
在.click处理程序中,通过parseFloat()函数只取得字体大小属性中的数值部分。parseFloat()函数会在一个字符串中从左到右地查找一个浮点(十进制)数。例如,它会将字符串’12’转换成数字12。另外,它还会去掉末尾的非数字字符,因此’12px'就变成了12。如果字符串本身以一个非数字开头,那么parseFloat()会返回NaN,即Not a Number(非数字)。
至此,所剩的就是修改解析后的数值并根据新值来重设字号大小了。在这个例子中,我们要在每次按钮被单击时把字号增大40%。为此,可以将num乘以1.4,然后再连接num和’px'来设置字体大小,参见代码清单4-3。

1
2
3
4
5
6
7
8
$(document).ready(function() { 
  var $speech = $('div.speech'); 
  $('#switcher-large').click(function() { 
    var num = parseFloat($speech.css('fontSize')); 
    num *= 1.4; 
    $speech.css('fontSize', num + 'px'); 
  }); 
});

现在,当用户单击Bigger按钮时,文本会变大,再次单击,会继续变大,如图4-2所示。

要通过单击Smaller按钮减小字体大小,应该使用除法而不是乘法,即num /= 1.4。同样,更好的方案是把对这两个按钮的单击操作,通过<div id="switcher">中的<button>元素组合到一个.click()处理程序中。在查找到数值后,再根据用户单击的按钮ID来决定使用乘法还是除法,如代码清单4-4。

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() { 
    var $speech = $('div.speech'); 
    $('#switcher button').click(function() { 
    var num = parseFloat($speech.css('fontSize')); 
    if (this.id== 'switcher-large') { 
      num *= 1.4; 
    } else if (this.id== 'switcher-small') { 
      num /= 1.4; 
    } 
    $speech.css('fontSize', num + 'px'); 
  }); 
});

根据第3章学习的内容,我们知道可以访问this.id得到this引用的DOM元素的id属性,因而就有了if和else if语句中的代码。这里,如果仅测试属性的值,使用this显然要比创建jQuery对象更有效。
如果提供一种方式能够返回字体大小的初始值当然更好了。为了做到这一点,可以在DOM就绪后立即把字体大小保存在一个变量中。然后,当用户单击Default按钮时,再使用这个变量的值。虽然可以通过再添加一个else if语句来处理这次单击,但此时改用switch语句应该更合适,参见代码清单4-5。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(document).ready(function () {
  // 获取要操作的DOM元素
  var $speech = $('div.speech');
  // 保存原始的字体大小
  var defaultSize = $speech.css('fontSize');
  // 监听按钮点击事件
  $('#switcher button').click(function () {
    // 获取字体大小
    var num = parseFloat($speech.css('fontSize'));
    // 判断当前按钮的id
    switch (this.id) {
      case 'switcher-large':
        num *= 1.4;
        break;
      case 'switcher-small':
        num /= 1.4;
        break;
      default:
        num = parseFloat(defaultSize);
    }
    // 重新设置字体的大小
    $speech.css('fontSize', num + 'px');
  });
});

在此,仍然是检查this.id的值并据以改变字体大小,但如果它的值既不是'switcher-large'也不是'switcher-small',那么就应该使用默认的初始字体大小。

总结

.addClass()方法不适用于动态设置样式

.addClass()方法适用于设置样式为固定值的情况。
如果希望样式持续的增大或减小,则要定义多个类,然后再迭代这些类来实现持续变大或变小的效果.这种方式麻烦。

如何获取DOM元素中字体的大小

$('选择符').css('fontSize')可以轻而易举地取得该DOM中的字体大小,这个方法的返回值包含数字和单位。

保存jQuery对象的变量名命名规则

可以在变量名中加入$符号来提醒自己该变量中保存着一个jQuery对象

parseFloat()函数

parseFloat()函数的功能

parseFloat()函数可以取得字符串中的数字部分,例如:通过parseFloat()函数只取得字体大小属性中的数值部分
parseFloat()函数会在一个字符串中从左到右地查找一个浮点(十进制)数。例如,

  • 它会将字符串'12'转换成数字12。
  • 另外,它还会去掉末尾的非数字字符,因此'12px'就变成了12。
  • 如果字符串本身以一个非数字开头,那么parseFloat()会返回NaN,即Not a Number(非数字)。

如何通过按钮来持续的增大或减小字体的大小

在$(document).ready()方法的匿名函数中写入方法,算法描述如下

  • 1.获取要操作的DOM元素的jQurey对象
  • 2.保存该jQurey对象的fontSize样式属性的值
  • 3.监听按钮点击事件
    • 3.1获取jQurey对象的fontSize样式属性值中的数值部分
    • 3.2根据触发点击事件DOM元素的id来判断具体触发的是哪个按钮
      • 如果是增大按钮,则使用乘法增大字体大小
      • 如果是减小按钮,则使用除法减小字体大小
      • 如果是默认按钮,则获取默认的fontSize属性值中的数值部分
  • 4.拼接数值和单位组成fontSize的属性值,然后通过jQury对象的css方法更新fontSize属性的属性值