Question

我正在开发一个Jquery插件，并且必须在脚本中设置许多css值以使其灵活。

它看起来像这样：

...var loadingBarInsideFWidth = loadingBarWidth - 4;
var loadingBarInsideWidth;
$(holder).find('.round').css({
'width':setRoundWidth,
'height':setRoundWidth
});
$(holder).find('.pointer').css({
'width':setPointerWidth,
'height':setPointerWidth,
'left':rotCenter,
'top':rotCenter*2
});...

等约70行代码。只是想问一下是否可以，或者有更好的方法吗？

THX

P.S。确定有一个外部css文件，所有这些值都是关于预加载器和一些导航元素的位置和大小相对于包含元素大小。

Answer 1

您可以从css文件中添加所有这些样式...并将插件包含在css文件中......这样，您的插件也可以根据其他人的外观进行自定义，并且它们不会与您一起玩javascript / jquery代码。

Answer 2

我更喜欢将CSS和JS分开：将所有样式放入文件中并根据需要动态加载。

如果那不是你想要的，你可以写：

(function(){
   // do some caching
   $holder = $(holder);

   function _css(elem,rules){
      $holder.find(elem).css(rules);
   }

    _css(".round",{'width':setRoundWidth, 'height':setRoundWidth});
})();

或者，为了进一步区分 - 将样式放入对象并迭代它。这使它更像“CSS”。

(function(){
   // do some caching
   $holder = $(holder);
   styles = {
       ".round":  { 'width' :setRoundWidth,
                    'height':setRoundWidth
                  },
       ".pointer":{ 'width' :setPointerWidth,
                    'height':setPointerWidth,
                    'left'  :rotCenter,
                    'top'   :rotCenter*2
                  }
   }
   for (var elem in styles){
      if (styles.hasOwnProperty(elem)) $holder.find(elem).css(styles[elem]);
   }
})();

Answer 3

如果你将它应用于in-DOM元素，从JS中添加70个CSS样式会导致大量的回流/重绘。

如果您不想使用插件发送专用的CSS表格，请考虑将样式直接写入动态CSS表格元素。

您可以通过DOM脚本编写<style>标记并将样式放在那里，或者劫持其中一个页内链接样式表来完成此操作。请参阅http://www.javascriptkit.com/domref/stylesheet.shtml。

Answer 4

将您的CSS样式放入样式表中的类中。

然后在需要时将该类添加到元素中。

jQuery(".myElement").addClass("myClass");

jquery为多元素语法设置css

4 个答案: