web-dev-qa-db-ja.com

JavaScriptを使用してCSSスタイルシートを文字列として挿入する

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

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

javascriptcssdomgoogle-chrome-extension
31
Dan Hlavenka

スタイル要素を作成し、文字列をinnerHTMLとして追加できます。このようなもの：

function addStyleString(str) {
    var node = document.createElement('style');
    node.innerHTML = str;
    document.body.appendChild(node);
}

addStyleString('body { color: red }');
addStyleString('body { background: silver }');
// This way allows you to add CSS in multiple passes

（重要な編集：IE9以下では 2スタイルシートまで しか許可されないことに注意してください上記のスニペットを使用する場合は注意してください。IE10では、この数は4095に増えました。）

ユーザーが新しいCSSを追加するときに、古いスタイルを削除して新しいスタイルを追加する場合は、1つのノードへの参照を取得できるように関数を切り替えることができます。

(function() {
    var node = document.createElement('style');
    document.body.appendChild(node);
    window.addStyleString = function(str) {
        node.innerHTML = str;
    }
}());

addStyleString('body { color: red }');
addStyleString('body { background: silver }');
// This way will remove the old style when the new one is added
61
Liam Newmarch

this guy のおかげで、正しい答えを見つけることができました。方法は次のとおりです。

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

フィドル

16
John R Perry

最近、これと同じニーズがあり、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ローダーがなくてもグローバル関数として機能します。

3
Pat Cullen