jquery 为多元素语法设置 css答案

【问题标题】：jquery set css for multiple elements syntaxjquery 为多元素语法设置 css
【发布时间】：2012-07-13 14:11:41
【问题描述】：

我正在开发一个 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 行代码。就是想问问这样行不行，有没有更好的办法？

谢谢

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

【问题讨论】：

我认为你可以为你的风格创建类并添加类。这将使插头更轻。

标签： jquery css syntax

【解决方案1】：

我更喜欢将 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]);
   }
})();

【讨论】：

【解决方案2】：

您可以从一个 css 文件中添加所有这些样式...并在 css 文件中包含该插件...这样，您的插件也可以被其他人定制为外观和感觉，他们不会与您一起玩javascript/jquery 代码。

【讨论】：

确定有一个外部css文件，所有这些值都是关于预加载器和一些导航元素的位置和大小相对于包含元素大小的。
然后你可以添加两个css文件，一个是核心，另一个是人们可以修改的。您不应该将 css 放在 javascript 中，如果您必须在某个时间点调整布局，以后您会很痛苦:)
但是所有这些值都是用js计算的。例如预加载器的宽度是容器宽度的 30%，依此类推。颜色、背景等所有视觉参数都在单独的文件中。

【解决方案3】：

如果您将其应用到 DOM 内元素，从 JS 添加 70 种 CSS 样式将导致大量重排/重绘。

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

您可以通过 DOM 脚本编写 <style> 标记并将样式放入其中，或劫持页面内链接样式表之一来实现此目的。见http://www.javascriptkit.com/domref/stylesheet.shtml。

【讨论】：

OK...为什么 70 行代码本身会成为问题？我以为你的意思是 70 种样式。
它对我来说看起来不是很干净......通过一个函数解析所有规则，正如 Christoph 建议的那样，它看起来好多了。

【解决方案4】：

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

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

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

【讨论】：