JS 要素スタイルの設定および取得メソッド

1. onmouseover イベントと onmouseout イベントを使用して、マウスの移動時のテキスト スタイルの変更を設定します。

2. 外部スタイルシートを使用する 2 つの方法。

• 1. タグを使用して外部ファイルに接続します。

• 2. @import メソッドを使用して外部スタイル シートをインポートします。

  先祖の違い。 LinkはXHTMLタグに属しており、@importは完全にCSSが提供するメソッドです。 CSS のロードに加えて、link タグは RSS の定義、rel 接続属性の定義など、他の多くのことも行うことができます。@import は CSS をロードすることしかできません。
  ロード順序の違い。ページが読み込まれるとき (つまり、ビューアで表示されるとき)、link によって参照される CSS は同時に読み込まれますが、@import によって参照される CSS は、ページが完全にダウンロードされるまで待ってから読み込まれます。そのため、@import が CSS をロードするページを閲覧すると、最初はスタイルがなく、その後突然スタイルが表示されることがあります。これは、ネットワーク速度が遅い場合には明らかです。

  互換性の違い。 @import は CSS2.1 で導入されたため、古いブラウザではサポートされていません。@import は IE5 以降でのみ認識されますが、リンク タグにはこの問題はありません。
  DOM を使用してスタイルを制御する場合の違い。
  JavaScript を使用して dom を制御してスタイルを変更する場合、@import は dom によって制御できないため、link タグのみを使用できます。
  そのため、特別な事情がない限りスタイルを導入するにはリンクを使用し、@import の使用を避けることをお勧めします

• 2 つの違い:
  本質的に、これら 2 つの方法は CSS ファイルをロードするためのものですが、まだ微妙な違い。

3. ページ要素のスタイルを動的に変更します。

• 1. getElement シリーズのメソッドを使用して要素にアクセスします。

• 2. スタイル属性を変更します:

  （1）style属性
  （2）className属性
  HTML元素.style.样式属性＝"值"
  document.getElementById("titles").style.color="#ff0000";

4. 関数を使用してメニュー効果を変更します

• 各 li タグの初期状態を設定します

• 2 つのスタイルを上下に設定します。メニューへの移動とメニューからの移動

  var len=document.getElementsByTagName("li");
      for(var i=0;i<len.length;i++){
          len[i].onmouseover=function(){
              this.className="over";
          }
          len[i].onmouseout=function(){
              this.className="out";
          }       
  }

5. JavaScript アクセス スタイルの適用。

• スタイルを取得するメソッド:

   document.getElementById(elementId).样式属性值
   var pObj=document.getElementById("test");
   var objTop=pObj.style.top;

• 内部 (埋め込み) スタイルと外部スタイルを取得するメソッド:

  currentStyle    //IE
  getComputedStyle()
  //其他浏览器
  var pObj=document.getElementById("test");
  
  var objTop= pObj.currentStyle.top;
  
  var objTop =document.defaultView.getComputedStyle(pObj,null).top;

• スクロールバーのスクロール距離を取得する:

  ページがロードされると、その詳細を取得します画像が配置されているレイヤーの位置、つまりページの左と上の位置です

  ページの初期位置を取得するときは、現在のブラウザのタイプを決定する必要があります

  スクロールバーがスクロールするときは、スクロール バーとページの上部および左側の間の距離 (現在のブラウザの種類を決定する必要があります) タイプ) を使用して、レイヤーの上部と左側の位置を変更します。

  if (document.documentElement && document.documentElement.scrollTop) {//Firefox\IE浏览器
  
  adverObject.style.top=adverTop+parseInt(document.documentElement.scrollTop)+"px";
  
  adverObject.style.left=adverLeft+parseInt(document.documentElement.scrollLeft)+"px";
  } else if (document.body) {// Safari、Chrome浏览器
      adverObject.style.top=adverTop+parseInt(document.body.scrollTop)+"px";
  adverObject.style.left=adverLeft+parseInt(document.body.scrollLeft)+"px";
  }

• scrollTop オブジェクトの上部とウィンドウ内の表示コンテンツの上部の間の距離を設定または取得します。

• scrollLeft オブジェクトの左端とウィンドウの左端の間の距離を設定または取得しますウィンドウ内に現在表示されているコンテンツの距離

• clientWidth スクロールバーやその他の端を除いた、ブラウザー内に表示されているコンテンツの幅は、ウィンドウの表示サイズによって変化します

• clientHeight 表示される領域の高さコンテンツはブラウザーで見ることができます

• スクロールを取得する ウィンドウ内でバーがスクロールする距離:

  documentElement.scrollTop;
  

• 実装のアイデア:

  画像を挿入します。レイヤーを作成し、CSS スタイルを使用してレイヤーの初期位置を設定します
  

6. マウスでスクロールする広告画像を作成します。

りー

以上がJS 要素スタイルの設定および取得メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。