54

Chrome 拡張機能を開発しています。ユーザーが独自の CSS スタイルを追加して、拡張機能のページ (Web ページではない) の外観を変更できるようにしたいと考えています。の使用を検討しましたdocument.stylesheetsが、ルールを分割したいようで、完全なスタイルシートを挿入することはできません。文字列を使用してページに新しいスタイルシートを作成できるソリューションはありますか?

私は現在jQueryなどを使用していないので、純粋なJavascriptソリューションが望ましいでしょう.

4

5 に答える 5

115

これを行う方法はいくつかありますが、最も簡単な方法は、<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;
  }
`);

必要に応じて、これを少し変更して、CSS がaddStyle()追加されるのではなく呼び出されたときに置き換えられるようにすることができます。

/**
 * 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 攻撃ベクトルになる可能性があるため、可能な限り回避することをお勧めします。

于 2013-03-19T17:43:50.573 に答える
23

こいつのおかげで正解にたどり着くことができた。方法は次のとおりです。

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)};

フィドル

于 2016-06-27T21:23:46.047 に答える
2

最近、これと同じニーズがあり、CSS の複数行を許可することを除いて、Liam と同じことを行う関数を作成しました。

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 ローダーがない場合はグローバル関数としても機能します。

于 2014-05-07T13:53:08.593 に答える