1

私は Web 側に不慣れで、CSS の扱い方に混乱しています。(ありがたいことに)、これまで ExtJS4 を使用する場合、HTML/CSS を直接操作することはほとんどありません...そのため、CSS を変更する必要があるため、問題が発生しています。

具体的には、アコーディオン ヘッダーの背景色を動的に変更しようとしています。

Javascript:

    afterrender: function(subForm) {
        subForm.getHeader().getEl().addCls('custom-accordion-hd-valid');
        // this works - so I know it's the right element.
        subForm.getHeader().getEl().setStyle('background', 'hsl(100, 60%, 60%)');
    }

CSS:

// attempt 1
.custom-accordion-hd-valid {
background: green;
}

// attempt 2
.custom-accordion-hd-valid .x-accordion-hd {
background: green;
}

そう:

  • 経由でスタイルを設定setStyleすることはできますが、スタイルを簡単に削除することはできません
  • addClsCSS試行 1を介して設定すると、CSS が読み込まれますが、によって上書きされます.x-accordion-item
  • addClsCSS試行2を介して設定すると、CSSのロードに失敗します

ヘルプ?

4

1 に答える 1

1

たとえば、ここで設定した背景スタイルを削除したい場合:

subForm.getHeader().getEl().setStyle('background', 'hsl(100, 60%, 60%)');

css を使用すると、再度設定することで簡単にオーバーライドできます。

subForm.getHeader().getEl().setStyle('background', 'none');

また

subForm.getHeader().getEl().setStyle('background', 'blue');

css は、複数のスタイルが提供されている場合に、どのスタイルが最も「重要」であるかを判断する方法を特に優先しています。css の特異性に関するこの素晴らしい記事をご覧ください。

その setStyle() メソッドを使用することで、これらの要素に「インライン」スタイルを適用していることに気付きます。ファイルまたはstylehtml タグ内の他の css 定義の優先度は低いためです。

于 2013-11-08T17:56:48.217 に答える