jQuery 插件开发_参数问题

<!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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,839评论 1 92
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,242评论 6 13
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,916评论 25 709
  • 我喜欢书写。 至少曾经是这样。 现在,我不清楚该怎样拿笔,你可能觉得匪夷所思,但我没必要讲一个无聊的笑话。 我发现...
    古陵人阅读 253评论 0 0
  • 时而孤单,又时而热闹的一个月。 青春期过后,觉得孤单这两个字特别的非主流,特别的小说体,但是离开宿舍开始工作以后,...
    范哲cheerup阅读 203评论 0 1