Javascriptの動的操作の詳細説明 CSS_javascriptスキル

1. jsを使ってCSS属性を操作する方法

1. ダッシュのない CSS 属性の場合は、通常、スタイル属性名を直接使用します。

例: obj.style.margin、obj.style.width、obj.style.left、obj.style.position

2. アンダースコアを含む CSS 属性の場合は、各アンダースコアを削除し、各アンダースコアの後の最初の文字を大文字に置き換えます。

例: obj.style.marginTop、obj.style.borderLeftWidth、obj.style.zIndex、obj.style.fontFamily など

3. CSSのfloat属性を操作するためのjsの特殊な書き方

float は JavaScript の予約語であるため、obj.style.float を直接使用することはできず、この操作は無効です。正しい使用方法は、IE: obj.style.styleFloat、Mozilla (gecko)、ff などの他のブラウザでは styleFloat: obj.style.cssFloat を使用します。

2. js を使用して CSS 属性値を取得します

1. インライン スタイル: obj.style 属性名を取得します。

JS は CSS 属性値を取得します

クラスにアクセスできません。

2. クラス内およびリンク外の CSS プロパティを取得します。IE は obj.currentStyle["プロパティ名"] メソッドを使用しますが、FF は getComputedStyle メソッドを使用します

3. js を使用して CSS 属性に値を割り当てます

1. クラス属性を割り当てる

割り当て: document.getElementById('ceil').className = "class1";

複数の値がある場合: document.getElementById('ceil').className = "class1 class2 class3";

2. obj.style.cssText はオブジェクトの CSS スタイルを設定します

document.getElementById('navition').style.cssText = "CSS コード';

概要

ページに適用されるスタイルを動的に変更する方法を知ることは、スタイリッシュでインタラクティブな Web ページを作成するのに非常に役立ちます。この記事で説明する知識は、JavaScript アニメーションの基礎など、より高度なテクニックの基礎となります。動的スタイルの変更は責任を持って使用し、過度に使用しないように注意することが重要です。前述したように、スタイルを変更すると Web の効率も向上します。コンテンツの表示と非表示は、クライアントとサーバー間の不要なデータ対話を回避するのに役立ちます。