CSS 属性の後に Javascript 式を続けることができ、CSS 属性の値は Javascript 式の計算の結果と等しくなります。 ?式の中で要素自体のプロパティとメソッドを直接参照することも、他のブラウザ オブジェクトを使用することもできます。この式は、この要素のメンバー関数内にあるかのようになります。
要素の固有属性に値を割り当てます
たとえば、ブラウザのサイズに基づいて要素を配置できます。
#myDiv?{
position:?absolute;
width:?100px;
height:?100px;
left:?expression(document.body.offsetWidth?-?110?+ ?"px");
top:?expression(document.body.offsetHeight?-?110?+?"px");
background:?red;
}
要素のカスタム属性に値を割り当てます
たとえば、ページ上のリンクの破線ボックスを削除します。 ?通常のアプローチは次のとおりです:
一見すると、式を使用する利点は明らかではないかもしれませんが、ページに数十、さらには数百のリンクがある場合でも、Ctrl+C と Ctrl+V を機械的に比較しますか? 、どちらがより冗長なコードを生成しますか?
式の使用方法は次のとおりです:?
a?{star?:?expression(onfocus=this.blur)}
説明: 中のスターは自分で定義した属性です。expression() に含まれるステートメントは、カスタム属性との間に他の属性があることを忘れないでください。式。引用符。本質は CSS であるため、s?script ではなく style タグに配置されます。これで、ページ内のリンクの点線ボックスを一文で簡単に削除できます。ただし、トリガーされた特殊効果が CSS 属性の変更である場合、結果は当初の意図とは異なります。たとえば、マウスの出入りに応じてページ上のテキストボックスの色を変更したい場合は、?
と書くべきだと自然に考えるかもしれません。
input?
{star?:?expression(onmouseover=this.style.backgroundColor="#FF0000";
onmouseout=this .style.backgroundColor="#FFFFFF")}
input?{star?:?expression(onmouseover=this) .style.backgroundColor="#FF0000";
onmouseout=this.style.backgroundColor="#FFFFFF")}
しかし、結果はスクリプト エラーになります。これを記述する正しい方法は、以下に示すように CSS スタイルの定義を関数に記述することです。
input?{star?:?expression(onmouseover=function()
{this.style.backgroundColor="#FF0000"},
onmouseout=function(){this.style.backgroundColor="#FFFFFF"})?}
式はブラウザのリソースを比較的多く必要とするため、一般的にはあまり必要ありません。