<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
通过传递一个参数,包含color 和 fontSize 属性 来修改标签的字体大小和颜色
$.fn.setFont = function(option) {
定义一个对象,当没有传参时,字体的样式就是这个对象里保存的样式
var defaultStyle = {
color: 'boack',
fontSize: '16px'
}
判断当前有没有参数,有则用参数中的样式,没有则用默认样式
利用extend合并功能 ,来合并用户传进来的参宿和默认的值
第一个参数添加一个空对象
就可以把所有的属性合并在第一个空对象身上,就不会修改默认属性,这样逻辑就会更合理
var setting = $.extend({}, defaultStyle, option);
//修改当前标签的css样式
return this.css({
'color': setting.color,
'fontSize': setting.fontSize
});
}
调用setFont函数来实现修饰字体效果
$(function() {
$('p').setFont({
color: 'red',
fontSize: '26px'
});
})
</script>
</head>
<body>
<p>你是一个打几把,又躺在你喝汤</p>
</body>
</html>