すぐに理解できた、JSのボックスモデルの知識と理解を簡単に分析-jsチュートリアル-php.cn

すぐに理解できた、JSのボックスモデルの知識と理解を簡単に分析

php是最好的语言

リリース： 2018-07-28 15:07:51

オリジナル

1656 人が閲覧しました

まず第一に、JSボックスモデルとは何かを理解する必要があります???

`JS盒模型` これは、JSで提供される一連のプロパティとメソッドを通じてページ内の要素のスタイル情報値を取得することを指します

#box (多くの独自のプライベートプロパティを含む) ->HTMLpElement.prototype ->HTMLElement.prototype ->Element.prototype ->Node.prototype ->EventTarget.prototype ->Object.prototype
var box = document.getElementById(“ボックス”); console.dir(box);

コンテンツの幅と高さ: 設定した幅/高さのスタイルはコンテンツの幅と高さです。高さの値が設定されていない場合、コンテナの高さはコンテンツに応じて自動的に調整されます。内部なので、取得された値は実際のコンテンツの高さです。固定の高さが設定されている場合、コンテンツの量が多いか少ないかに関係なく、コンテンツの高さは実際には設定された値を参照します。実際のコンテンツの幅と高さを指します (設定した高さとは必ずしも関係ありません)。たとえば、高さを 200px に設定します。コンテンツがオーバーフローする場合、実際のコンテンツの高さは次のようになります。溢れ出るコンテンツの高さを追加

   1、client系列(当前元素的几个私有的属性)
        clientWidth/clientHeight:内容的宽度/高度+左右/上下填充 (和内容溢出没有关系)        clientLeft:左边框的宽度  clientTop:上边框的高度  (border[Left/Top]Width)    2、offset系列
        offsetWidth/offsetHeight:clientWidth/clientHeight+左右/上下边框 (和内容是否溢出也是没有任何的关系的)        offsetParent:当前元素的父级参照物
        offsetLeft/offsetTop:当前元素的外边框距离父级参照物的内边框的偏移量    3、scroll系列
        scrollWidth/scrollHeight:和我们的clientWidth/clientHeight一模一样(前提是：容器中的内容没有溢出的情况下)

    如果容器中的内容有溢出,我们获取的结果是如下规则:        scrollWidth:真实内容的宽度(包含溢出)+左填充        scrollHeight:真实内容的高度(包含溢出)+上填充
   获取到的结果都是"约等于"的值,因为:同一个浏览器,我们是否设置overflow=&#39;hidden&#39;对于最终的结果是有影响的;在不同的浏览器中我们获取到的结果也是不相同的;

    scrollLeft/scrollTop:滚动条卷去的宽度/高度    2、关于JS盒子模型属性取值的问题
    我们通过这13个属性值获取的结果永远不可能出现小数,都是整数;浏览器获取结果的时候,在原来真实结果的基础上进行四舍五入;    3、关于操作浏览器本身的盒子模型信息
        clientWidth/clientHeight是当前浏览器可视窗口的宽度和高度(一屏幕的宽度和高度)
        scrollWidth/scrollHeight是当前页面的真实宽度和高度(所有屏加起来的宽度和高度~但是是一个约等于的值
    我们不管哪些属性,也不管是什么浏览器,也不管是获取还是设置,想要都兼容的话,需要写两套       document.documentElement[attr]||document.body[attr]; //->必须document.documentElement在前

    例如：
    [获取]    document.documentElement.clientWidth||document.body.clientWidth
    [设置也需要写两套]    document.documentElement.scrollTop=0;    document.body.scrollTop=0;

ログイン後にコピー

    function win(attr, value) {        if (typeof value === "undefined") {//->没有传递value值->"获取"
            return document.documentElement[attr] || document.body[attr];
        }        //->"设置"
        document.documentElement[attr] = value;        document.body[attr] = value;
    }    console.log(win("clientHeight"));
    win("scrollTop", 0);

ログイン後にコピー

win: ブラウザボックスモデルを操作するメソッド

値なしで attr のみが渡された場合、デフォルトの意味は「get」ですすぐに理解できた、JSのボックスモデルの知識と理解を簡単に分析両方のパラメータが渡された場合、「設定」を意味します

大まかに言うと、これは「クラスのオーバーロード」に関するものです。同じメソッドが、異なるパラメータを渡すことで異なる関数を実装します

JS ボックスモデルでは: client series/offset series/scrollWidth/scrollHeight はすべて「読み取り専用」です。値は属性を通じてのみ取得でき、要素のスタイルは属性を通じて変更できません。

scrollTop/scrollLeft: スクロールバーの高さ/幅 (これら 2 つの属性が唯一の「読み取り可能および書き込み可能」属性です)
//box.scrollTop = 0;//-> コンテナの先頭に直接戻ります

scrollTop 値には境界値 (最大値と最小値) があり、設定した値が最小値より小さいか、最大値より大きいほとんどは役に立たない、効果はやはり境界の値

    [最小值是零]
     box.scrollTop = -1000;//->直接回到了容器的顶部,没有超出
     console.log(box.scrollTop);//->0

    [最大值是=真实的高度-当前容器一屏幕的高度]
        var maxTop = box.scrollHeight - box.clientHeight;
        console.log(maxTop);

ログイン後にコピー

jsでのボックスモデルの詳しい説明

ボックスモデルの詳細CSS3 でのボックスモデル属性のボックスサイズの紹介