1

ファンシーツリーを使用する Web アプリにツリーがあります。一部のノードでフォントの色を赤に設定する必要があることを除いて、すべてうまく機能します。私はextraClasses適切なノードに対してすべて完全に適用され、ブラウザーのデバッガーを使用して検証できる JSON で使用しています。

font-styleただし、 CSS属性を簡単に適用できますがbackground-color、何らかの理由でフォントの色がベースに引き継がれませんspan.fancytree-title。代わりに、すべてのノードが黒です。

CSS:

span.OrgDataTreeNotChecked
{
    background-color: #EFFAFA;
    color: red!important;
    font-style: italic;
}

関連する extraClasses を生成する C#:

if (org.Status == "NotChecked")
    item.extraClasses = "OrgDataTreeNotChecked";

ブラウザー デバッガーでは、これを明確に確認できます。

期待どおりに適用される extraClasses ノード

ここで、色が要素の属性に組み込まれていることがわかります。

設定中の色

ただし、ハイライトするspan.fancytree-titleと、色が上書きされ、代わりに黒が使用されていることがわかります。

オーバーライドされる色

.initファンシーツリーのイベントとドキュメント準備機能の両方で、jQueryでこれらのノードの色をオーバーライドしようとするなど、さまざまなことを試しました。

$(".OrgDataTreeNotChecked").closest(".fancytree-title").css({ "color": "red" });

すべての .fancytree-title要素の色を設定するというブルート フォース アプローチも試してみました。

$(".fancytree-title").css({ "color": "red" });

これも効果がありませんでした。私はアイデアから新鮮です。フォントの色を適用したくないだけで、フォントの色だけを適用したいだけです。他のすべての属性は問題なく機能します。ヘルプ！

4

4 に答える 4

4

多くの試行錯誤の後、Chromeの「要素の検査」機能を使用して、私にとってうまくいったのは次のとおりです。

span.OrgDataTreeNotChecked > span.fancytree-title {
    background-color: #EFFAFA;
    color: red!important;
    font-style: italic;
}

extraClasses 文字列で指定されたクラスは、fancytree-title スパンをラップする fancytree-node スパンに適用されるように見えるため、右山かっこ演算子を使用して「ドリル ダウン」するとうまくいきます。

于 2014-09-10T20:41:37.323 に答える