3

私は一種のCMSを作成しています。このシステムでは、各エディターは以下のように独自のCSSを定義できます。このスタイルは、独自の記事に適用する必要があります。

<style>
p{
color:blue;text-align:center;
}
a{
color:red;
}
</style>

これらのスタイルは、特定のdiv（この場合は）に適用する必要がありますid="editors_area"。

<body>
    <div id="editors_area">
        ===Styles should be applied only here.===
        Each editors article are displayed in this area.
    </div>
    ===Styles should NOT be applied here.===
</body>

これを実現するために、#editors_area以下のようにサーブ側の子孫セレクターとしてエディターのCSSに挿入する予定です。

<style>
#editors_area p{
color:blue;text-align:center;
}
#editors_area a{
color:red;
}
</style>

しかし、上記の要件を達成するためのより簡単な方法があると思います。

編集 私はjavascriptコードを削除しました。ここでは適していませんでした。

任意のアイデアをいただければ幸いです。前もって感謝します。

4

4 に答える 4

5

CSSはこのために設計されているので、最初のメソッドは正しいものです。言うまでもなく、jQueryメソッドは機能しません。

jQueryを使用してcssプロパティを変更するのは、ページの読み込み後に必要な場合のみにしてください。その場合でも、addClass()またはremoveClass()を使用して、CSSファイルでそれらのクラスを定義する必要があります。これは、関心の分離を改善するためのものです。

于 2012-10-24T07:35:43.600 に答える
3

SASSとSCSSは、このようなことを行う機能を提供します（ただし、フロントエンドの担当者から得た限りでは可能ですが、質問のポイントが完全に欠落している場合を除きます）。

何かのようなもの：

#editors_area
    a 
        color:blue
        text-align:center
    p
        color:red

使用している言語によっては、チェックする価値があるかもしれません。私はRuby、Python、PHP、Javaの実装を見てきましたが、私はRuby自身しか使用していません。

于 2012-10-24T07:41:21.707 に答える
1

あなたはこれを試してみます

$("#editors_area > *").css("color","blue"); // * may be p or a whatever
于 2012-10-24T07:36:51.080 に答える
1

jQueryからCSSブロックを動的に挿入する方法を見つけている場合は、次のようにすることができます。

$('<style type="text/css">
    #editors_area p {
       color:blue;text-align:center;
    }
    #editors_area a {
       color:red;
    }
    </style>').appendTo('head');
于 2012-10-24T07:38:50.957 に答える