CSS は js 式を使用してエフェクト_エクスペリエンス交換を実現します

IE5 以降のバージョンでは、CSS プロパティを Javascript 式に関連付けるために、CSS での式の使用がサポートされています。ここでの CSS プロパティは、要素の固有プロパティまたはカスタム プロパティにすることができます。つまり、CSS 属性の後に Javascript 式を続けることができ、CSS 属性の値は Javascript 式の計算の結果と等しくなります。式の中で要素自体のプロパティとメソッドを直接参照することも、他のブラウザ オブジェクトを使用することもできます。この式は、この要素のメンバー関数内にあるかのようになります。

要素の固有プロパティへの値の割り当て

たとえば、ブラウザのサイズに応じて要素を配置できます。

#myDiv {
位置: 絶対;
幅: 100ピクセル;
高さ: 100ピクセル;
左: 式(document.body.offsetWidth - 110 "px"); # ##top:expression(document.body.offsetHeight - 110 "px");
background: red;
}

要素のカスタム属性に値を割り当てる

Forたとえば、ページの点線ボックス上のリンクを削除します。通常のアプローチは次のとおりです。


link1
link2
link3
では反映されない可能性があります。これはエクスプレッションを使用する利点を示していますが、ページ上に数十、さらには数百のリンクがある場合でも、Ctrl C と Ctrl V を機械的に使用しますか? さらに、この 2 つを比較すると、どちらが冗長なコードを生成しますか?それ以上については？

エクスプレッションの使用方法は次のとおりです。


# ##link1
link2
link3
説明: 中の星はユーザーが任意に定義した属性です。 Expression() に含まれるステートメントは JS スクリプトです。カスタム属性と式の間に引用符があることを忘れないでください。本質は依然として CSS であるため、スクリプトではなくスタイルタグに配置されます。ページ内のリンク点線ボックスを一文で削除するのは簡単です。ただし、慢心しないでください。特殊効果が CSS 属性の変更である場合、結果は本来の意図とは異なります。たとえば、マウスの出入りに応じてページ上のテキスト ボックスの色を変更したい場合は、


## #input {スター : 式( onmouseover=this.style.backgroundColor="#FF0000"; #
## ## #
ただし、結果はスクリプト エラーになります。正しい書き方は、以下に示すように、CSS スタイルの定義を関数に記述することです。

input { スター : 式(onmouseover=function()
{this.style.backgroundColor="#FF0000"},
onmouseout=function(){this.style.backgroundColor ="#FFFFFF"}) }


注
これはあまり必要ありません。式はブラウザのリソースに影響を与えるため、一般に式の使用はお勧めできません。要件は比較的高いです。

例: CSS で式を使用してインターフェイス オブジェクトのバッチ制御を実装する

問題の説明: CSS スタイルを使用することで、オブジェクトのバッチのクラス属性を定義して同じものを指定できることがわかります。スタイル、インターフェースを統一します。しかし、同じ種類のオブジェクトのイベントをどのように統一するのでしょうか? 例: インターフェースは無数にあります マウスがこの画像を通過すると、画像の src が **_over になることをどのように認識するか。 jpg?


解決策: css の表現方法を使用します。
具体的な実装については、.css の記述方法を参照してください:

/*画像 CSS を置き換える* /
#imgScript { /*ここでは、オブジェクト ID をワイルドカード スタイルに使用します。CSS 関数を定義することもできます*/
star:expression(
onmouseover = function()
{
/*画像を置き換えます*/
{
This.name = this.src;
this.src = this.src.replace('.jpg', '_over.jpg');
this.HasChg = 1;
}
},
onmouseout = function()
{
/*元の画像を復元*/
if(this.HasChg != null) {
this.src = this.name;
this.HasChg = null;
}
}
)

}/*end imgScript*/