javascriptは元素の計算様式を取得します。

4001 ワード
javascript 元素
背景
cssを使ってページを制御して4種類の方式があって、それぞれ行内のスタイル（インラインのスタイル）、埋め込み式、リンク式、導入式です。
  • 行の中のスタイル(インラインスタイル)は、htmlラベルに書いてあるスタイルの中で、例えば
    div>
  • に埋め込まれたスタイルはスタイルラベルに書いてあります。例えば
  • リンク式は、リンク式としてcssファイルをlinkタグで導入することであり、例えば＜link href=“test.css”rel=“external nofollow”type=“text/css”rel=“styless heet”
  • 導入式は、cssファイルをimportで導入することであり、例えば@import url（「test.css」）
    • javascriptで要素のスタイル情報を取得したいなら、まず考えられるのは元素のスタイル属性です。ただし、要素のスタイル属性は要素のインラインスタイルだけを表しています。要素の一部のスタイル情報がインラインスタイルに書いてある場合、一部は外部のcssファイルに書いてあります。スタイル属性によって要素の完全なスタイル情報を得ることはできません。したがって、要素の計算スタイルを使用して、要素のスタイル情報を取得する必要があります。
    計算スタイルを取得
    要素のstyleの属性は、デフォルトでは空の文字列です。
    計算されたスタイル(行間スタイルではない)を取得します。
    get ComputedStyle.プロパティ
    取得した結果は100 pxなどのバンド単位の文字列です。
    書き方：get ComputatidStyle(box).height;
    幅の高さ(サイズ)を取得します。
  • ele.clientHeight/Widthはpaddingをサポートしています。枠を含んでいません。元素は可視領域の幅があります。
  • ele.offset Width/Heightはpadding、borderを含む。
    以上の2つは、固定値を設定すると、固定値をもとに表示され、コンテンツによっては表示されません。
  • ele.scrollwidth/Heightはコンテンツによって開けられた高さ（枠を含まない）。
    固定パターンを設定するかどうかは関係なく、内容によって開けられます。結果を表示します。
  • フレームサイズ
  • clientLeft/clientTopフレームサイズ
  • get ComputatidStyle(box 3).border TopWidthフレームサイズ
    • 以上取得したのは全部単位を持たない数字で、しかも範囲は視認区です。
    絶対位置
    元素距離
  • offset Part  親レベルを決めて、親レベルを決めていないでbodyを歩きます。
  • offset Left  現在の要素（左外枠）から親レベル（左枠線）までの距離。
  • offset Top  現在の要素（上外枠）から親レベル（上枠線）までの距離。
    取得したのは単位を持たない数字です。
    • 上の属性を使うなら、必ず以下のようにします。
    1、サブセットに絶対位置付けがある。
    2、親の位置付けも必ず位置付けが必要です。
    3、自分と父のクラスは幅の高さが必要です。
  • get BoundingCient Rect（）
    • 現在の要素からページの可視エリアまでのサイズ、距離。
    注意:
    スクロールバーと一緒に行きます。
    つまりドラッグしてスクロールバーの値が変わります。
    含みます：width/height/left/right/top/bottom/x/y
    書き方：box 2.get BoundingCient Rect（）；
    位置決め距離を使って、小さな例を作ります。
    
 let timer = null;
 box.onclick =function (){
 timer = setInterval(()=>{
 box.style.left= box.offsetLeft + 1 +'px';
 },16.7)
 }
    以下のレンダリングフレームをここで理解します。
    レンダリングフレームとは、ブラウザのフル描画プロセスを指し、フレーム間の時間間隔はDOMビュー更新の最小間隔である。主流のスクリーンリフレッシュ率は60 hzであるため、フレームをレンダリングするイベントは16.7 ms以内に制御しなければフレームダウンを保証できない。つまり、レンダリングは毎回16.7 ms以内でなければなりません。
    パッケージの絶対位置
    
//     、    
 class Tools {
 position(ele){ 
 let left = 0;
 let top = 0;
 let obj = ele;
 while(obj){
 // t =          +       
 left += obj.offsetLeft + obj.clientLeft;
 top += obj.offsetTop + obj.clientTop;
 //    Obj  ， obj         
 obj = obj.offsetParent; //box3 -> box2 -> box1 -> 
 }
 left -= ele.clientLeft; //    box3 border,     
 top -= ele.clientTop;
 return {
 left,
 top
 }
 }
 }
 let t1 = new Tools;
 console.log(t1.position(box3).top);
    トップの小さな例を返します。
    
<style>
*{
 margin:0;
 padding:0;
}
#box{
 width:100px;
 height:50px;
 font-size:20px;
 text-align: center;
 line-height: 50px;
 color:#fff;
 background: red;
 cursor: pointer;
 position:fixed;
 bottom:0;
 right:0;
 display: none;
}
body,html{
 height:3000px;
}
</style>
</head>
<body>
 <div id="box">    </div>
<script>
 window.onscroll = function(){
 // console.log(window.pageYOffset);
 if(window.pageYOffset >= 600){
 box.style.display = 'block';
 }else{
 box.style.display = 'none';
 }
 }
 let timer = null;
 box.onclick = function(){
 let t = window.pageYOffset;
 timer = setInterval(() => {
 t-=100;
 if(t <= 0){
 t = 0;
 clearInterval(timer);
 }
 window.scrollTo(0,t);
 }, 16.7);
 }
</script>
    以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
    php操作JSONフォーマットデータの実現コード
    csdnユーザデータベースとオフィシャルユーザの重畳度を合わせて重複部分のユーザを選別します。