jQuery編寫設(shè)置和獲取顏色的插件

2019-11-19 18:03:21

字體：大中小

供稿：網(wǎng)友

分享一下編寫設(shè)置和獲取顏色的插件，首先我將插件的名字命名為jquery.color.js。

該插件用來(lái)實(shí)現(xiàn)以下兩個(gè)功能

設(shè)置元素的顏色。
獲取元素的顏色。

先在搭建好如下編寫插件的框架：

;(function($){ //這里編寫插件代碼})(jQuery);

我這里采用jQuery.fn.extend().這種方法來(lái)編寫，代碼如下：

;(function($){ $.fn.extend({ "color":function(value){ //這里寫插件代碼 } });})(jQuery);

這個(gè)方法可里面有一個(gè)value.參數(shù)，當(dāng)給color().這個(gè)傳入了參數(shù)那么就用來(lái)設(shè)置color.值，不傳參數(shù)就是獲取color().值。代碼如下：

;(function($){ $.fn.extend({ "color":function(value){ if(value==undefined){ return this.css('color'); } else{ return this.css('color',value); }  } });})(jQuery);

最后我們來(lái)測(cè)試一下：

<body><script> $(function(){ alert($('#div1').color()); $('#div2').color('#333'); });</script> <div id="div1" style="color:blue">blue</div> <div id="div2" style="color:#ccc">#ccc</div></body>

測(cè)試結(jié)果如下圖: