jQuery插件覆盖所有css或仅覆盖某些属性

jQuery plugin overwrite all css or only some attributes

本文关键字：覆盖 属性 css 插件 jQuery      更新时间：2023-09-26

我正在为我的web应用程序创建一个简单的jQuery插件。现在我添加了一个"设置"选项，可以用来更改所选元素的默认CSS：

Html

<script type="text/javascript">
   var mycss = {tagNormalStyle: {backgroundColor: '#ddd', color:'#222'}};
    $(document).ready(function(){
        $("#tag1").tagme(mycss);    
        $("#tag2").tagme(null);
    });
</script>

jQuery插件

$.fn.tagme = function(options) {
// some defaults
var settings = $.extend({
        tagNormalStyle:{
            backgroundColor: 'black',
            color: 'white',
            marginLeft: '5px',
            marginTop: '5px',
            padding: '5px',
            float: 'left',
            borderRadius: '5px'
        },
      //more stuff here...,
       options
      };
}

在我的代码中，我使用了类似的东西：

if (condition)
    tag.css = settings.tagNormalStyle;

问题是，例如，如果用户只需要更改颜色，该怎么办？

var mycss = {tagNormalStyle: {color:'#222'}};
$("#tag1").tagme(mycss);

现在，tagNormalStyle的所有默认值都消失了！如何避免对设置对象上的每个css属性进行"硬编码"？也许我可以"合并"默认和选项对象。有什么想法吗？

谢谢！

将true作为第一个参数传递给扩展函数。类似于：

$.extend(true,obj1,obj2)
相关文章：