0

フォーカスcssクラスを関連付けることができるボタンがあり、実行時にJavascript内でこれをインスタンス化します。
これはすべて特注のJavascriptフレームワークによって提供されるため、変更することはできません。

通常、このボタンに2つの追加のCSSクラスを提供します。

btn { background-image: url(/btn.png);}
btn.focus { background-image: url(/btn-focus.png);}

これにより、ボタンが「フォーカスされている」かどうかに基づいて、2つの異なる画像が表示されます。

私が今抱えている問題は、画像のURLが実行時に動的に読み込まれ、静的なCSSファイルでそれらを指定する方法がないことです。

考えられる解決策の1つは、btnクラスとbtn.focusクラスを含む（動的URLを含む）新しいスタイル要素を「何らかの方法で」生成し、それをヘッドに追加するか、のインスタンス化の前にマークアップに埋め込むことです。ボタン自体。このソリューションは理想的ではないようです。誰かが他に何か提案できますか？

前もって感謝します。

4

2 に答える 2

0

特に、単一のオブジェクトのさまざまな状態を表す画像（たとえば、ボタンのフォーカスされた状態またはフォーカスされていない状態）に関する場合は、スプライトを使用することをお勧めします。これは、すべてのボタンの状態を含む単一の画像を作成し、それをロードすることです（必要に応じて動的に）。次に、CSSでユニバーサルルールを記述できます。

btn {background-position: 0 0;}
btn.focus {background-position: 0 -20px;} /* 20px is the height of your button*/
于 2012-07-05T10:06:28.443 に答える
0

彼らのcssスタイルの「インライン」スタイルがあなたのスタイルを上書きしているので、これは機能しないと言っていますか？もしそうなら、代わりにこれを行います

btn { background-image: url(/btn.png) !important;}
btn.focus { background-image: url(/btn-focus.png) !important;}
于 2012-07-05T10:02:59.510 に答える