0

ドキュメントに、通常のCSSルールで設定された背景色と画像を持つ要素があります。

特定のイベントが発生したときに、そのアイテムをアニメーション化して強調表示したいと思います（Scriptaculousを使用していますが、この質問は同じことを行うすべてのフレームワークに当てはまります）。

new Effect.Highlight(elHighlight, { startcolor: '#ffff99', endcolor: '#ffffff', afterFinish: fnEndOfFadeOut });

私が直面している問題は、アニメーションが完了した後、要素が次のスタイルのままになることです（FireBugによる）：

element.style {
  background-color:transparent;
  background-image:none;
}

これはCSSルールをオーバーライドします。これは、要素レベルで設定されているため、アイテムが以前持っていた背景を失っています...

私がやろうとしているのは、アニメーションが完了した後に実行しているコールバック関数で、スタイルプロパティを「消える」値に設定することです。

var fnEndOfFadeOut = function() {
  elHighlight.style.backgroundColor = "xxxxx";
  elHighlight.style.backgroundImage = "xxxxx";
}

私が理解しようとしているのは、「xxxx」に何を入れるか（または同じことを別の方法で行う方法）です。
'auto'、'inherit'、および''（空白の文字列）を試しましたが、どちらも機能しませんでした（実際には機能するとは思っていませんでしたが、ここではわかりません）。

私も試しました：elHighlight.style = ""; 予想通り、これは例外をスローしました。

これを克服するために私は何ができますか？
強調表示している要素内にスパンを配置し、代わりにそのスパンを強調表示できることはわかっていますが、余分な無駄なマークアップを回避できることを望んでいます。

ありがとう！

4

4 に答える 4

7

正しい要素にスタイルを設定していない可能性があります。親ノードのどこかに設定されている可能性があります。

elHighlight.style.backgroundColor = "";
elHighlight.style.backgroundImage = "";

次のコマンドを呼び出して、デフォルトのスタイルをすべて削除することもできます。

elHighlight.style.cssText = "";

いずれの場合も、これらのプロパティを設定している特定の要素でこれを行う必要があります。つまり、親ノードが見つかるまで再帰を行う必要がある場合があります。

于 2009-01-27T21:29:00.050 に答える
2

試す
elHighlight.style.removeProperty('background-color') elHighlight.style.removeProperty('background-image')

于 2009-01-27T21:44:53.870 に答える
0

elHightlight.style.background = "" ;?を試しましたか？

私のサイトには蛍光ペンコードがあり、これは機能します

function highlight(id) {
var elements = getElementsByClass("softwareItem");
for (var ix in elements){
    elements[ix].style.background = ""; //This clears any previous highlight
}
document.getElementById(id).style.background = "#E7F3FA";
}
于 2009-01-27T21:27:53.843 に答える
-1

HTML要素は複数のCSSクラスを持つことができます。ハイライト情報をCSSクラス内に配置します。このクラスを要素に追加して、強調表示します。クラスを削除して効果を元に戻します。

于 2009-01-27T21:28:10.630 に答える