15

スタイルシート内のすべての css セレクターに何かを追加するテキストフィルターまたは javascript/jquery 関数はありますか? Twitter ブートストラップで 1 つの div だけに影響を与えようとしていますが、その外側のサイドバーに影響を与えています。これを行う方法はありますか? (iframe は使用したくありません。)

編集：

私が望むのは、css ファイル内のすべてのセレクターに ID "#content" を付加できるようにすることだけです。

4

5 に答える 5

28

sabithpocker's answer の下のコメントは、スタイルを動的に変更するのではなく、CSS を静的に変更しようとしていることを示しています。正規表現を使用すると、これが最も簡単になると思います。

検索:([,|\}][\s$]*)([\.#]?-?[_a-zA-Z]+[_a-zA-Z0-9-]*)
置換:$1#content $2

正規表現の内訳

  • ([,|\}][\s$]*)}- 前のスタイルからorを検索し、,その後に空白が続きます (スペース/タブ: \s、改行: $)。閉じ中かっこ\カンマは、正規表現がスタイルの本体内を調べないようにします。
  • [\.#]?-存在する場合、スタイル名の先頭#またはに一致します。.
  • -?[_a-zA-Z]+- CSS スタイル名は、アンダースコアまたは文字で始めることができます。また、スタイル名の前にダッシュを付けることができます。
  • [_a-zA-Z0-9-]*- スタイル名の残りの部分に一致します。これは省略できますが、変更されたすべてのスタイルのスタイル名を知っていると便利です。
  • $1#content $2- }(または,) と空白は、検出された方法で残されます ( $1)。その後に、挿入したテキスト#content(スペースに注意してください) が続き、その後にスタイル名 ( $2) が続きます。

これを Notepad++ でテストしたところ、私のスタイルシートで動作しました。
CSS が圧縮されていない (複数行である) 場合は、複数行の正規表現をサポートするエディターが必要になることに注意してください (Notepad++ はサポートします)。

于 2012-06-22T18:59:26.247 に答える
7

RustyTheBoyRobot と BoltClock♦ の回答を改善して、コメントとメディア クエリを許可しました。

探す：([,|\}][\s$]*)((?|\/\/.*[\s$]+|.*\/\*.*\*\/[\s$]*|@media.*\{[\s$]*|)*)([\.#]?-?[_a-zA-Z]+[_a-zA-Z0-9-]*)

と置換する：$1$2 #content $3

編集

私が提供したコードは PHP でしか機能しないことに気付きました。

これは、Javascript と PHP で動作するはずの改良版です。

正規表現パターン*

(^(?:\s|[^@{])*?|[},]\s*)(\/\/.*\s+|.*\/\*[^*]*\*\/\s*|@media.*{\s*|@font-face.*{\s*)*([.#]?-?[_a-zA-Z]+[_a-zA-Z0-9-]*)(?=[^}]*{)

完全な例*

var outputString = inputString.replace(
    /(^(?:\s|[^@{])*?|[},]\s*)(\/\/.*\s+|.*\/\*[^*]*\*\/\s*|@media.*{\s*|@font-face.*{\s*)*([.#]?-?[_a-zA-Z]+[_a-zA-Z0-9-]*)(?=[^}]*{)/g,
    "$1$2 #content $3"
);

これにより、@Mariano Martinez Peckbackground: linear-gradient(to bottom, #ae9e9e, #454545);の問題と問題も修正されるはずです。@font-face

于 2016-06-08T06:50:45.043 に答える
1

回避策 (本当にこの方法で行う必要がある場合):

  1. ウィンドウがロードされ、すべてのスタイルが適用されるまで待ちます
  2. スタイルをそのまま適用したい要素を取得します
  3. スタイルを取得してインラインで適用する

クロス ブラウザーの実装では、以下に示す jquery プラグインを使用できます。

$('#mydiv *').each(function(){
    $(this).css($(this).getStyleObject());
    });

次に、元のスタイルシートを無効にします

document.stylesheets[n].disabled = true;
//or use this : $('link[title=mystyle]')[0].disabled=true;

//n should be index of style sheet -- counts external + internal style sheets

プラグイン:

/*
 * getStyleObject Plugin for jQuery JavaScript Library
 * From: http://upshots.org/?p=112
 */

(function($){
    $.fn.getStyleObject = function(){
        var dom = this.get(0);
        var style;
        var returns = {};
        if(window.getComputedStyle){
            var camelize = function(a,b){
                return b.toUpperCase();
            };
            style = window.getComputedStyle(dom, null);
            for(var i = 0, l = style.length; i < l; i++){
                var prop = style[i];
                var camel = prop.replace(/\-([a-z])/g, camelize);
                var val = style.getPropertyValue(prop);
                returns[camel] = val;
            };
            return returns;
        };
        if(style = dom.currentStyle){
            for(var prop in style){
                returns[prop] = style[prop];
            };
            return returns;
        };
        return this.css();
    }
})(jQuery);
于 2012-06-22T18:14:28.267 に答える
0

いいえ、スタイルシートは単なるコピー ペースト ファイルです。一意の識別子で必要なものをすべてラップし、この一意の識別子を使用してこれを参照する必要があります。

于 2012-06-22T17:55:13.440 に答える