jquery - 如何将 CSS 应用到我的 JQuery 插件

Question

我正在编写一个需要一些最小默认 CSS 的 JQuery 组件插件。 (组件的功能布局需要 css - 不仅仅是样式装饰)我应该:

• 编写一个单独的 .css 文件并将其动态加载到我的插件代码中(我该怎么做？)
• 使用 JQuery 的 .css(...) 在我的插件代码中直接应用 css 属性

似乎第二种选择是一种更安全的方式来确保我的组件获得它需要的 css。想法？

Answer 1

我喜欢将 CSS 保存在一个单独的文件中，然后使用插件将其导入。

加类，这使得维护更容易，并且使用户或 future 的开发人员更容易使用您的插件，而不是挖掘 JavaScript 源代码(这可能会随着时间的推移而增长)。

要使用 jQuery 应用样式表，您可以这样做:

$(function() {
  $('head').append('<link rel="stylesheet" href="plugin-styles.css" type="text/css" />');
});

显然，您需要知道 CSS 文件的路径，但如果您随插件一起提供 css 目录，这应该不是问题。

就“确保 [您的] 组件获得它需要的 css”而言，只要您确保您的元素具有 JavaScript 源代码可以访问的唯一标识符(类名或 ID)，第一个选项就可以使用文件。

如果您想确保不会多次加载样式表，您可以这样做:

$(function() {

  var bStylesheetExists = false;
  $('link').each(function() { 
    if($(this).attr('href') === 'plugin-style.css')) {
       bStylesheetExists = true;
    }
  });

  if(bStylesheetExists === false) {
    $('head').append('<link rel="stylesheet" href="plugin-styles.css" type="text/css" />');
  }

});