CSS式とは何ですか-フロントエンドQ&A-php.cn

CSS式とは何ですか

青灯夜游

リリース： 2023-01-07 11:42:08

オリジナル

3485 人が閲覧しました

css 式では、css 属性の後に Expression() を使用して JavaScript 式を接続します。css 属性の値は JavaScript 式の結果です。構文形式は「css 属性: 式 (JavaScript 式)」です。 );"。

CSS式とは何ですか

このチュートリアルの動作環境: Windows 7 システム、CSS3&&JavaScript バージョン 1.8.5、Dell G3 コンピューター。

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

css 式では、css 属性の後に Expression() を使用して JavaScript 式を接続します。css 属性の値は、JavaScript 式の結果です。

式の中で要素自体のプロパティとメソッドを直接参照することも、他のブラウザオブジェクトを使用することもできます。式は、この要素のメンバー関数内にあるかのように表示されます。

上記の文章は少しわかりにくいと思いますか?それは問題ではありません。知っておく必要があるのは、エクスプレッションを通じて CSS ファイルに Javascript スクリプトを記述し、それを使用して非常に便利な機能や効果を実現できるということです。

式の適用:

1. 要素の固有属性に値を割り当てます。次の例は、ブラウザのサイズに応じて要素を配置します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mid.lt263.com/mb</title>
<style type="text/css">
#myDiv {
position: absolute;
width: 100px;
height: 100px;
background:#c00;
left: expression(document.body.offsetWidth - 180   "px");
top: expression(document.body.offsetHeight - -80   "px");
text-align:center;
line-height:90px;
color:#fff;
}
</style>
</head>
<body>
<div id="myDiv">mb5u.com</div>
</body>
</html>

ログイン後にコピー

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

次の例を見てみましょう:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mid.lt263.com/mb</title>
<style type="text/css">
a {star:expression(this.onFocus=this.blur())}
</style>
</head>
<body>
<a href="#" _fcksavedurl="#">模板天下 - mid.lt263.com/mb
</p>
</body>
</html>

ログイン後にコピー

説明: 中の星印は、ユーザーが任意に定義した属性です。必要に応じてカスタマイズできます。設定は個別に定義され、expression() に含まれるステートメントが JS スクリプトです。カスタム属性と式の間に引用符があることを忘れないでください。本質は CSS のままなので、スクリプトではなく style タグに配置されます。このようにして、ページ内のリンク点線ボックスを一文で簡単に削除できます。特に注意が必要なこと: 式を使用する特別な必要性がない限り、式を使用することは一般的に推奨されません。式には比較的多くのブラウザリソースが必要となるためです。

注:

CSS 式は、CSS プロパティを動的に設定する強力な (ただし危険な) 方法です。 Internet Explorer では、バージョン 5 以降の CSS 式がサポートされています。次の例では、CSS 式を使用して、1 時間ごとに背景色を切り替えることができます。

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

ログイン後にコピー

上に示すように、式では JavaScript 式が使用されています。 CSS プロパティは、JavaScript 式の評価に基づいて設定されます。この式メソッドは他のブラウザでは機能しないため、クロスブラウザ設計では Internet Explorer 専用に設定すると便利です。

式の問題は、私たちが思っているよりも頻繁に評価されることです。ページを表示して拡大したときだけでなく、ページをスクロールしたときやマウスを移動したときも再計算されます。 CSS 式にカウンターを追加して、式が評価される頻度を追跡します。ページ上でマウスを動かすだけで、10,000 を超える計算を簡単に実行できます。

CSS 式が評価される回数を減らす 1 つの方法は、1 回限りの式を使用することです。これは、最初の実行時に結果を指定されたスタイル属性に割り当て、この属性を使用して置換します。 CSS 式。ページサイクル中にスタイルプロパティを動的に変更する必要がある場合は、CSS 式の代わりにイベントハンドラーを使用することが現実的なオプションです。 CSS 式を使用する必要がある場合は、CSS 式が何千回も評価され、ページのパフォーマンスに影響を与える可能性があることを必ず覚えておいてください。

(学習ビデオ共有: css ビデオチュートリアル)

以上がCSS式とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。