Question 1

有几种方法可以做到这一点，但最简单的方法是创建一个<style>元素，设置它的textContent属性，然后附加到页面的<head>.

/**
 * Utility function to add CSS in multiple passes.
 * @param {string} styleString
 */
function addStyle(styleString) {
  const style = document.createElement('style');
  style.textContent = styleString;
  document.head.append(style);
}

addStyle(`
  body {
    color: red;
  }
`);

addStyle(`
  body {
    background: silver;
  }
`);

如果需要，您可以稍微更改此设置，以便在addStyle()调用时替换 CSS，而不是附加它。

/**
 * Utility function to add replaceable CSS.
 * @param {string} styleString
 */
const addStyle = (() => {
  const style = document.createElement('style');
  document.head.append(style);
  return (styleString) => style.textContent = styleString;
})();

addStyle(`
  body {
    color: red;
  }
`);

addStyle(`
  body {
    background: silver;
  }
`);

IE 编辑：请注意 IE9 及以下版本最多只允许32 个样式表，因此在使用第一个代码段时要小心。这个数字在 IE10 中增加到 4095。

2020 编辑：这个问题很老了，但我仍然偶尔会收到关于它的通知，所以我更新了代码，使其更现代，并替换.innerHTML为.textContent. 这个特定的实例是安全的，但innerHTML尽可能避免是一个很好的做法，因为它可能是 XSS 攻击媒介。

Question 2

多亏了这个人，我才能找到正确的答案。这是它的完成方式：

function addCss(rule) {
  let css = document.createElement('style');
  css.type = 'text/css';
  if (css.styleSheet) css.styleSheet.cssText = rule; // Support for IE
  else css.appendChild(document.createTextNode(rule)); // Support for the rest
  document.getElementsByTagName("head")[0].appendChild(css);
}

// CSS rules
let rule  = '.red {background-color: red}';
    rule += '.blue {background-color: blue}';

// Load the rules and execute after the DOM loads
window.onload = function() {addCss(rule)};

小提琴

Question 3

你听说过承诺吗？它们适用于所有现代浏览器并且使用起来相对简单。看看这个将 css 注入到 html head 的简单方法：

function loadStyle(src) {
    return new Promise(function (resolve, reject) {
        let link = document.createElement('link');
        link.href = src;
        link.rel = 'stylesheet';

        link.onload = () => resolve(link);
        link.onerror = () => reject(new Error(`Style load error for ${src}`));

        document.head.append(link);
    });
}

您可以按如下方式实现它：

window.onload = function () {
    loadStyle("https://fonts.googleapis.com/css2?family=Raleway&display=swap")
        .then(() => loadStyle("css/style.css"))
        .then(() => loadStyle("css/icomoon.css"))
        .then(() => {
            alert('All styles are loaded!');
        }).catch(err => alert(err));
}

真的很酷，对吧？这是一种使用 Promise 决定样式优先级的方法。

或者，如果您想同时导入所有样式，您可以执行以下操作：

function loadStyles(srcs) {
    let promises = [];
    srcs.forEach(src => promises.push(loadStyle(src)));
    return Promise.all(promises);
}

像这样使用它：

loadStyles([
    'css/style.css',
    'css/icomoon.css'
]);

您可以实现自己的方法，例如按优先级导入脚本、同时导入脚本或同时导入样式和脚本。如果我获得更多选票，我将发布我的实现。

如果您想了解有关 Promise 的更多信息，请在此处阅读更多内容

Question 4

我最近有同样的需求，并编写了一个与 Liam 相同的函数，除了还允许多行 CSS。

injectCSS(function(){/*
    .ui-button {
        border: 3px solid #0f0;
        font-weight: bold;
        color: #f00;
    }
    .ui-panel {
        border: 1px solid #0f0;
        background-color: #eee;
        margin: 1em;
    }
*/});

// or the following for one line

injectCSS('.case2 { border: 3px solid #00f; } ');

这个函数的来源。您可以从Github 存储库下载。或者在此处查看更多示例用法。

我更喜欢将它与 RequireJS一起使用，但它也可以在没有 AMD 加载器的情况下作为全局函数工作。

Answer 1