ホームページ > ウェブフロントエンド > jsチュートリアル > JS 要素スタイルの設定および取得メソッド

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

一个新手
リリース: 2017-09-14 10:05:58
オリジナル
1896 人が閲覧しました


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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート