CSS式の使い方の紹介_CSS/HTML

IE5 以降のバージョンでは、CSS 属性を Javascript 式に関連付けるための CSS での式の使用がサポートされています。ここでの CSS 属性は、要素の固有属性またはカスタム属性にすることができます。

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;
}

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

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

link1
link2
link3?

一見すると、式を使用する利点は明らかではないかもしれませんが、ページに数十、さらには数百のリンクがある場合でも、Ctrl+C と Ctrl+V を機械的に比較しますか? 、どちらがより冗長なコードを生成しますか?

式の使用方法は次のとおりです:?

a?{star?:?expression(onfocus=this.blur)}

link1
link2
?

説明: 中のスターは自分で定義した属性です。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"})?}



?

注意

式はブラウザのリソースを比較的多く必要とするため、一般的にはあまり必要ありません。