110.尚硅谷_JS基础_其他样式相关的属性

嗯，我们接下来来上课啊，上午呢，我们是把这个获取样式方式的原则做了一下介绍，那获取样式呢，呃，其实主要就是两主要这么几种，一种是我们通过这种style，它操作的是我们这个内联样式，还有一个是我们这个叫做current style，这是操作什么呀，当前的样式就是获取当前的样式，诶这个呢，是在IEIE浏览器里好用的，还有一个叫做一个get community的一个style，诶这是我们说一个其他浏览器的一个方式啊，就这么几个，然后除了这几个呢，我们还有一些东西啊，我们来说一下还是和我们样式相关的，来一个零六叫什么呢？呃，其他样式操作的这些属性啊，其他的样式操作属性，那这个我们要看什么呢？来看我们这个文档，点开这个javascript，这个h do有一个这个do参考直接看谁呢？我们这有一个对象叫做什么呀，Element，也就是我们那个元素啊元素一点开它我们来看看。诶，你看元素这里边是不是有一堆的属性啊，哎，又有一堆的属性啊，那这里边我们要看的是谁呢？诶还有一堆我们看从上面看，哎，就看这两个黑色的。

叫什么呢？叫做一个LAN he y叫什么呀？元素的可见高度，元素的可见宽度，那这两个属性都是什么呀？都是。元素的啊，都是元素的，我们来看看他们这些怎么来获得样本啊，怎么来获得样本来，那这样啊，我还是先来整一个这个div div来一个这个什么呢？来一个ID，咱们叫一个这个box box1 box1呢，还是我上边整一个这个button button哎，整一个button，然后给他来一个ID，叫做一个B填零一，还是给他写点字啊，点我一下先做点准备工作，然后呢，这给他来俩换行啊，然后我们来写个样式style标签，这来一什么呢？来一个这个号一来一个这个100个像素，也来个这个100个像素，然后呢，Background color来个这个red。

哎，Background color来一个这个红色的一个div啊，保存那这块R运行的话，它这块就是一个什么呀，诶100乘100的一个红色一个div，那接下来呢，我们来写一下这个script的标签，还是来一个window，点一个onload，等于一个这个function啊先做一些这个准备工作，然后呢，获取这个按钮，还有这个BOX1，一个BOX1等于一个do，点一个版ID box1，然后这再一个这个BT01等于一个这个do的点一个guide ID来个BTN01，对这两个东西都有了，然后呢，我们来一个什么呢？BTN01，点一个on click等于这个function，等于function，现在这个单击响应函数绑定好了，然后呢，我们来看这两个属性，一个叫什么呢？一个叫做hat，还有一个叫做west，来我这块呢，直接复制一个叫做一个LAN west，还有一个。

一个派，哎可烂什么意思呀？哎客户端啊，实际上指的是客户端，那这一块它直接过来叫叫什么，他给咱们说叫什么元素的一个可见高度和宽度啊，可见高度的宽度，那我们来说一下诶这两个属性可以获取我们元素的这个可见宽度和这个高度，那我们来看什么效果啊，什么效果直接来一个box，来一个alert一个什么呢？Box1.1个一个诶一个west，诶west叫可见宽度啊，我们来看什么效果啊，这块我直接刷新一下这一点走你诶返回什么。100，诶100是啥呀，我这元素宽度是不是就是100呀？哎，元素宽度100，首先它或的就是我们什么呀，元素一个宽度，但注意了它和我们上午用的方式什么区别，诶是没有PX，哎没有PX啊，所以注意它这个返回值是不带PX，它是可以干嘛呀，可以直接计算啊计算的我们来说一下啊，就说呃这些属性，包括以下数据属性，它都什么呢？都是不带我们这个PX，诶它返回的什么呢？返回的都是一个这个数字啊，数值可以什么呢？可以直接进行计算，而你之前那些，如果他返回一个，你还得干嘛呀，你还用我们那个pass in给它取一下整数，把这个给它去了呀，然后才能计算啊，才能计算这一块呢，直接返回的就是一个数字啊，返回数字，但是这里边你要注意了，如果它还仅仅是这一个功能，那它其实没有什么存在的意义是吧？啊，没有什么存在意义，那我们来看。

啊，它还有什么特点，那这里边呢，现在我们这个BOC它只有什么呀？只有只有宽度，只有高度是吧？诶来我再来什么呢？我给它来一个这个拍顶拍定我来一什么呢？来一个这个10PS，我来一个10PS拍顶，那就意味着什么呀，我上下左右是不是都有十个像素，那现在我这个这盒子应该干嘛了，是不是被撑开了呀？那现在高是多少啊，一百一宽是不是也，诶不是110，一百二吧，诶高是一百二是不是宽也是一百二啊，哎，都是120，因为上下各有十个像素的一个那边距啊变成一百二了，诶那注意了，如果我们是用什么呀，用我们的style或者是get comut style获取的时候，它返回的是不是都应该是100啊，但我们来看看这个C它是多少。

我一刷新我这一点。多少一百二啊，所以注意它返回的是不是还是不是我里边这个这个大小了，它是不是包括这个那边距啊，哎那边距啊来再看还有谁啊，还有我们这个啊边框来一个十个像素，然后来一个sorry的，然后来一个yellow黄色的一个边框，我们这一刷新走，你这是一个边框啊来我再获取走，诶有没有边框是不是还是一百二啊，诶还是120，所以注意我们这个可袜子获取的是什么呀？可见宽度和可和这个高度它主要什么呢？会获取我们这个元素的什么呀？诶宽度高度它包括谁呢？包括我们这什么呀，内容区哎内容区和什么呢？和内边距，所以它获取这个值是什么呀？是将内容区和内边距干嘛呢加一块返回的啊，也就是说它返回的是什么呀，你整个这个什么呀，内部的这圈是什么。

啊，大小啊，是这一圈叫做一个client he啊client还有一个client west内部的包，不包括边块。不包火边块啊，不包边块client还有一个client好，那这块看完了，然后注意了，还是看一个client wise是一个可见的一个宽度，那client head呢，是不是可见的高度啊，哎，可呢，是一个可见的一个高度，可以刷新一点，其实也是120，诶它也是诶包括内容区和内编剧，不包括这个边框啊边框好，那还是再看一个，那我们说了这能设置，这能获取是吧，我想来这么一个box1.1个client一个hi，等于什么呢？等于一个300，或者你要不放心我来什么的，来300 PS我想干嘛呀，我是不要修改一下啊，诶那这玩意能不能改呢？一刷新我这一点没反应吧，诶来看看报没报错啊，刷新一点诶也没报错是吧，反正你改完了他也是没用，那这是为啥呀？

难道我不应该写直接写一个300去保存？是不是一个效果呀？哎，写完了一点用也没有，为啥没用啊，咱们先想想，你想想我这值是干嘛的呀，它是通过将这个wise和内边距是不是加一块计算来的呀，所以注意这个值是不是某个值啊，它是计算来的吧，好，那你这要改，那问题来了，我是改宽度还是改排定啊，他是是没法改啊，你改他也不知道改哪个，所以注意这个属性都是什么呀？哎，都是只读的啊，只读的这些属性都是只读的干嘛呢？诶不能修改，包括待会我说的这些属性它都是什么呀？只读的也就是说你只能读，但是不能去用它去改啊，它去改改只有一种方式，就是通过我们什么呀代啊，就是通我们这个style，只能用它去改好，这是一个white，还有一个，然后接下来往下找，往下找还有一集，还有几个东西，这有一堆，先看这两个叫什么呢。

啊，叫做一个of set head of set we叫什么呢？返回元素的高度，元素的什么呀，宽度，这元素的高度和元素的宽度，那这是什么意思呢？我来说一下，其实就差这是可兰的，那是off outside的是吧，来不在了，我们来看看，那还是我们直接来输出吧，这我来输出一个换一个，换一个什么呢？换一个这个offet west啊offet，刚才这个CLA是120万，这一百二我们看offet，你放心，我这一点走你诶多少了。

一一百四，它怎么一百四了？哎，它是不是把边框给你加上来啊，诶把边框给你加上啊，所以注意我们叫做一个offet west，它干嘛呢？Offet one和我们这个offet he，诶它可以什么呢？诶可以获取我们元素的什么呀？诶整个的这个大小，诶整个的大小，整个的这个宽度和这个高度，那其实就是什么呀，比我们这个client多了一个什么呀，边框，诶它包括什么呢？包括我们这个叫做内容均，也就是我们这个wise，还有这个had，还有什么呢？内边距和我们这个边框，诶所以它比这个client呢，就多了一个什么呀，边框啊，就做了一个边框，整个一个大小啊所以这块我们来看它是一个140，同样也是没有PX啊，也是没有PX，这是一个好了，那这个呢，我们就不多说了啊，Height我们就不测试了，就是。

它包括边框，可烂着呢，不包括边框，然后接下来再说这东西说完了，接下来呢，还有什么呢？下边还有两，还有一个这个叫什么呢？这个叫做一个offet parent parent，我们知道叫负元素是吧，Offset parent。Offet offet什么意思呀？偏移量是吧？诶偏移量这个东西我们定位的时候会用到，那这个offet part什意思呢？诶，叫做定位负元素啊，也是副元素，叫做什么呢？定位复元素来一下叫做一个outside part，它可以什么呢？可以用来获取我们这个当前元素的这个定位副元素啊定位副元素那我们来看一下吧，直接alert，咱们直接来一个吧，来一个Y一个这个off parent op等于什么呢？等于box1.1个offet parent，诶，那我们说了，如果我要是获取BOX1的这个什么呢？它有一个parent note是它这个复元素对吧？诶，那BOX1的复元素是谁呀？是不是就是body啊，哎，就是body，那我们来看看它的opposite outside parent是谁啊，我们看看是谁，直接来一个一个op，看看他是谁，我一保存，我给你刷新走你一点，诶还是保是吧，似乎跟我们。

这个part note没啥区别是吧？诶没啥区别，他注意了，叫定位复元素，什么意思来看着EV bos1里边，我在这来什么呢？来一个ID，我来一个这个BOX2，然后诶，BOX2，然后呢，我把BOX1放到这个BOX2里边，那现在我问你了，我这个BOX1的副元素是谁？是BOX2啊来来，那你看这个off outside part还是谁啊，看它变不变，我这一刷新走你，诶还是bodyy是吧，诶还是boy包Y，应该算是它的什么了，它祖先元素了吧，诶不算是负元素了，诶他再来一个，我在BOX2外边再套，套一什么呢？套一个那个BOX3，然后我们再看，直接往那一套一保存，咱们再看效果，这一刷新再一点。

还是body底，那这是什么情况呢？我们来看看啊，诶，那既然叫定位负元素了，什么叫定位负元素呢？来咱们看着啊，我给BOX2加一个代，我们叫什么呢？叫做一个position，叫做一个。大来听，诶叫什么呀，是不是开启BOX2的这个相对定位啊，哎，相对定位来给BOX3呢，我也开一个，现在BOX2和BOX3的相对定位我是不是都开启了呀？那注意刚才我没给他们开启相对定位的时候，他找的谁找的body，现在我给他们开启了，咱们来看找谁，我这一刷新他们一点走你诶变成谁了，是不是div了？诶那问题来了，那div我这有俩的到底是哪个呢？诶我们确定一下，打印一下，那什么呢？ID啊，打印下它的ID，我们来看效果，这刷新再一点走你谁呀，BOX3诶也就是说当我给box开启这个定位以后，它的辅元素变成谁了？

是box了，诶box了，所以这个东西你应该能看懂了，这跟我们的定位是一致啊，诶我们来说一下它什么呢？它会获取到离我们这个当前元素最近的什么呀？哎，开启了这个定位的，哎叫做什么呀，祖先元素啊，开启了定位的祖先元素，什么叫开启了定位啊。

只要你的position值不是什么呀，还记得那个吗？Static吧，只要你的position值不是static，我们是不是就开启了这个定位啊，哎，都忘了是吧？哎，现在好好想想啊，只要position值还记得那个定位的值吗？第一个值是static是什么呀？默认值，哎，静止的，然后还有什么呀，Relative相对定位那个什么呀？Absolute绝对定位fix的，我们这个固定定位啊，固定定位那这块什么呢？它会获取到离当前元素最近的，开启了定位的祖先元素，这跟我们绝对定位那个规则是不是一样的呀？所以现在我们来看，那对于BOX1来说，BOX2BOX3是不是都开启定位了呀？他找谁呀？是不是找最近的呀，最近的时候是BOX2啊，哎，最近的BOX2，好，我把BOX2这个定位给他去掉，BOXS2定位，定位没有这个看他找谁是BOX3了，来BOX3啊，找离他最近的开启的定位的组先元素好。

报三的也关了，是不是都没定位啊，诶来我一保存一刷新一点，诶没有没有ID，没有ID是谁呀？诶来我们给bodyy加1ID吧，某一个bodyy咱们这样能看得清楚一点，我这一刷新一点谁呀？哎，Body啊bodyy，所以这里边我们来说它会返回离它最近的开启的定位的祖先元素，如果什么呢？如果所有的这个祖先元素都没有开启定位，则什么呢？则返回body啊，则返回body，所以这块注意叫做一个off outside point啊，它是返回这个定位的一个复元速啊定位的复元速好接下来再看还有两个叫一什么呢？叫做一个。Offet left，还有一个叫做offet top off outside left left top，这是什么呀？是不是我们那个偏移量啊，哎，偏移亮啊，叫做一个off set left，我们来看一下。

Off outside left，还有一个off outside，一个炮，诶，Left表示什么呢？表示我们说当前元素相对于其。定位元素的这个什么呀？水平偏移量啊，水平偏移量这top呢，当前元素相对于其定位元素的什么呀？诶垂直偏移量就是两个方向的一个偏移量，而且你要注意它这个偏移量是相对于谁呀？其定位元素或者是叫什么呀，其定位副元素啊定位副元素那其实具体来说就是谁呀，就是它的这个offet parent啊，就是它这个offet parent，好，那现在我们来看还是来一个这个直接alert一个吧，Alert一个这个box1.1个这个offet一个left，我要看它的那个左侧K量，我们来看是多少啊，看多少，现在我们说了它的这个祖先元素是不是都没开启定位啊，那它的定位元素是谁啊，是body，所以在获取的这个值它是相对于谁呢？相对于body的啊，相当于body，我这一保存，这一刷新，我这一点走你诶返回什么，返回一个。

八为什么是八呢？诶是不是这个距离是八呀，哎，那么这一块整个是一个玻璃，它和玻璃这个距离是八，所以反应的是一个八啊是相当于反的是这个便移量啊，这个偏移量，那再来看一个，那这一块呢，现在是没有开启定位干嘛呢？我给box开启一个，来一个这个style position来一个这个什么呀了，那现在它的定位负元素是谁。BOX2，所以现在box一再返回的这个什么呢？再返回的这偏移量是相对于谁来说的，相对于BOX2来说的，诶我们来看看啊，一刷新再一点走你什么了零，为什么零啊，他俩是不是没有偏移啊，哎，他们俩就重合到了一起，现在你看不见报字，我们把报告S2给它整出来，直接来一个这个井号，BOX2 box2我们来一个这个给他来一个这个pading吧，拍Ding来一个这个100个像素，然后呢，来一个background color来一个这个井号，别为一保存，咱们一刷新走你，诶是不是跟这是八字，诶那现在我再获取便移量，咱们看是多少，我是一点变成多少了，100，为什么是100，是不是因为这段距离是100啊，哎，这段距离是100啊，所以注意它这个偏移量是相对于谁的，相对于其定位的负元素，你现在是相当于BOX2说的，如果没有BOX2没有开启定位相当于谁啊，相对于这个body说了啊，Body说了相对于它的定位负元素啊。

Off，这个left是这样，Top是不是一个意思了，哎，我们就不再去演示了啊，这是我们获取它这个偏移量啊，偏移量，但是你会发现我们实际上偏移量应该有几个，是不是应该有四个呀，Left to，还有一个right，还一个bottom吧，哎，大家注意，他没给我们提供那么多，为什么呢？因为这两个是不是已经够用了呀，哎，够用了，所以没有给我们提供那个bottom，还有那个哎，Right啊把这事儿没有弄弄那么复杂啊，那么复杂，这是我们说天移量好这一块呢，是我们说的一个，嗯，这么几个东西啊，然后接下来呢，我们再来说一下，往下再来看啊，下边还有一堆，哎，你看又一套，你看这几个名儿都差不多是吧。

死k left，死k top啥意思？那滚是吧，那滚的高度，这个K外呢滚的宽度，诶那这什么玩意呢？我们来看看，那这里边为了演示这个东西啊，我在这块呢，嗯，我这来在这儿，我新建一个这个div，直接来一个div，我们来一个号一个BOX4报四我这来写点东西，来一个这个井号，一个这个BOX4BOX4Y来一个这个200个像素，Hat呢来一个这个300个像素，然后background color来个井号BMV1保存，现在我一刷新，这是一个BOX4个这的，哎，四个这的啊四在这呢，然后干嘛呢，我这块呢，给它来一个。

BOX4里边我再放一个div，井号一个BOX5，我这时又放一盒啊，诶放一个BOX5，然后呢，我来设置一下BOX5，直接来一下井号一个什么呢？井号一个box box5box5我这来写一个，写一个YY我来一个，诶150个像素，比这个负元素稍微的窄一点啊，然后呢，氦他们来什么呢？来一个300个像素，300个像素它是不是跟负元素一边高了呀，哎，一边高了啊，那这块我们来看看，那直接再来一个background color来一个这个yellow，我这一保存，现在来看BO4里边放一个bos，现在是不是这么一个效果呀？哎，这么一个效果，现在呢，BOX5和这是五外边这是四，五和四的高度是不是一样啊，诶一样，那有谁成功情况呢？五我的高度来什么呢？来一个600干嘛了，哎，是不是子元素从负元素那溢出来呀，溢出来以后我们来看什么效果一刷新。

诶，这五是不是就出来了，哎，出来了以后呢，来，那我不想再出来怎么办，我是不是可以来一个overf overflow啊，哎，Overflow，如果我来一个黑。易保存是不是就切了呀？哎，如果我来一个这什么呢？来一个凹凸易保存，这就出来这个滚动条的呀，哎，滚动条了啊，是这么一个效果啊，这么一个效果，那说它干嘛啊，那回过头来说，我们这个属性叫做一个可烂的叫做一个什么呀，SK head，还有一个SK wise，那我们来看什么效果，这里边呢，我先得把谁啊，先把这个BOX4获取到bar一个这个BOX4等于一个do的点一个盖AND100ID来一个这个BOX4，那现在我们来说，现在我要干嘛呢？我要获取这个BOX4的一个高度，Alert一个box4.1个LAN，一个head，是不是获取它可见的高度啊，那那高度应该多少？

我们来看看吧，我这一刷新一点是不是300啊，哎，为什么是300啊，哎，我是不是给它设置的高度是不是就是300啊，哎300啊，这就是我们这个可见的一个高度啊，态的可见的高度，但是你要注意了，我们要看什么来把它给住了，来什么呢？还有一个叫做一个CK叫什么呢？叫滚动的高度，那这个我们来看它是多少。我给你刷新他们一点走你多少。600，诶怎么是600，这什么意思呢？来咱们举个例子啊，现在呢，这个假设是咱们这个负元素，哎，负元素里边是不是这个子元素啊，但是子元素呢，它干嘛呢，它比负元素是不是高出来了，诶高出来了，所以这里边呢，我们说了，哎可能子元素是这么高，也就是说子元素这个部分是不是超出负元素了，超出负元素，但是这部分由于我们设置了overflow，所以这部分是不不可显示啊，它是。

隐藏的吧，哎，隐藏的，所以注意咱们这个可烂的害指的什么？可烂的害指的什么呀。是不是这个区域啊，哎，可见的区域，这个区域我是可以看见的，那那死磕坏的呢，我通过滚动条是不是可以看的区域有有这么大个呢，这个高度叫什么呀？叫做k head啊，K head叫做一个滚动的一个高度啊，所以k head干嘛呢？可以获取到我们整个滚动区域的一个高度啊，整个里边那个子元素滚动区域的一个高度，那同理，那块外呢，是滚动区域的一个宽度啊哎，滚动区的一个宽度，所以这块我们来看一下，我把它Y也调大点，Y来什么呢？来一个这个450，我一保存，咱们现在一刷新横向滚动条是不是也出来了，出来以后来我们来一什么呢？死刻一个，死刻一个这个west wid PH我已保存，一刷新一获取是不是一个四百五啊，什么意思，整个这个滚动的区域是什么呀？是四百五啊四百五也就是说这边还有什么呀，还有一部分是不是给咱们。

藏起来呢，哎，它获取的是整个这个高度，还有宽度啊，滚动的高度还有宽度啊好这块写个注释啊，比较简单，叫做一个块wise，还有一个死块害叫什么呢？可以获取我们这个什么呀，元素整个这个什么呀，哎滚动哎区域的什么呢？滚动区域的一个高度啊，可以获取我们元素整个滚动区域的一个高度，好这块看完了，然后接下来往们下再看啊，这个CLA head west就高度这个宽度和高度这块看完了，然后再看，还有这还有一对，还有一对更有意思叫什么呢？叫做死磕life的死磕top left什么玩意儿左侧，诶top是上边，是不是也是我们这个偏移量啊，诶咱们直接看这东西吧，你一看你就。

不明白，我们看呢，直接来一个alert，一个box4.1个这个死磕C，死磕一个left，诶死磕一个left，我们来看效果啊，这一块我一刷新，我现在获取走你什么呀，零诶来看着啊，现在我这个水平滚动条是不是没有动啊来我现在一获取是一个零来水平滚动条呢往右来点。微点。22了是吧？来，我再往里边挪点，我再一点走，你是不是70了呀，来来，我再挪一点，再一点走，你是不是172了呀，所以你发现这什么了，它获取的实际上是什么呀？是这距离吧，哎，就说我水平滚动条是不是移动的一个距离啊，哎，水平滚动条移动的一个滚动的一个距离啊，所以这块叫做一个per left，它可以什么呢？可以获取我们这个水平滚动滚动条滚动的一个距离啊，滚动的距离，所以这里边我们来看我这一往这边一调整啊，现在是零，因为什么呀，因为滚条是没动啊，你给它拖到头一保存，这是什么呀？267是不是就滚到头了啊，滚到头了啊，获取的是我们水平滚槽滚动的一个距离，好，那同理，那这个死磕焊死磕top呢，是不是垂直滚条滚动距离啊，哎，我这一保存，咱们再来看一刷新，现在我1.0。

然后往下一走走，你是不是177啊，再往下走。是不是317啊，诶叫做垂直滚动条，滚动的一个距离，死磕一个套叫什么呢？可以获取我们这个垂直滚动条，哎，滚动的一个距离啊，滚动距离好，那这块是我们说的这一堆属性啊，一堆获取样式的一些属性啊，这块呢，这堆属性多了以后呢，其实可以方便我们去操作了，那这里边我们来看一个东西啊，看一个东西什么东西呢？直接来一个alert alert于什么呢？我们先来看一下啊，LAN clientlitlan，一个hat，这叫什么呀？Box4.1个LAN，一个hat，我要看什么呀？我是不是要看它这个可见区域的高度啊，那这个距离应该是是不是这一段啊，换句话说，是不是不是滚动条内部这个高度啊，哎，内部这高度我们来看是多少？

一点是多少，283不对呀，我设置的是300，它怎么获取到283呀？哎，你注意啊，这是不是有一滚动条呢？哎，滚动条的距离它是不是给我刨出去了，哎，这滚动条应该正好占了多少，占了17，所以剩边剩点五是不是剩下。

二百八一百八十三呀，哎，183啊，诶二百二百八十三，283这个效果，所以这里边我们来看一下land hat呢，这是一个二八二百八三，然后我们再看一个，看个什么呢？来一个alert，一个叫做一个box4.1个什么呢？磕一个head是不是滚动的高度啊，滚动的高度我们来看一刷新，我这一点是一个600是吧？哎，是个600，这个呢是600，那我们说了我的这个square top，我随着滚动条往下挪，它是不是在逐渐增加呀，诶逐渐增加，看我干一件什么事啊，我来什么呢？我来一个死框head减去一个死块top，我是不知道这两个值做减法呀，哎，我们来看这是什么效果啊，现在我问你死磕hi，是不是一个600啊，Top呢是不是零啊，因为滚动条我现在是不是没动啊，好，我这现在1.1做减法多多少600是吧，诶那看着啊，我把这个值，我把这滚动条往。

往下拖，我这死top是不是越来越大呀，它越来越大以后呢，我这差干嘛了，是不是越来越小啊，你这一看是561啊，哎，让他做减法，做减法干嘛呢？往下再拖拖，是不是越往下拖越小啊来当我拖到底的时候。哎，现在是不是最小了，诶，我们来看它是谁一点诶。283这数看着很眼熟是吧？这正好是谁呀，正好是我们刚才这个可烂的hat吧，诶那注意了，假设我那个什么呢，我滚动条没有做到底它这个值会不会是283。不会吧，只有什么呀，只有滚动条完全拖动到底部的时候，它这个差是不是才是283啊，诶283啊，所以这块我们发现这么一个，诶这么一个整式什么呢？我们说当满足我们什么呢？叫做一个box 4.1个K，一个head，咱们就直接写了啊死磕head s c，死K，一个T减去我们这个什么呀，死k top等于什么呢？等于我们这个叫做一个plant hat时，诶那当满足这个等式时说明什么？是不是说明我们这个叫做叫做垂直滚动条是不是滚动到底了呀，你要注意为什么滚动到底了，因为只有到底的时候，它是不是才283的呀，你随便任意一个位置是不是都不是，都不是这个数，只有到底才是这个数，所以注意当这个等式满足的时候。

证明我们这个什么呀，垂直滚动条滚到底了啊滚到底了诶那我们来说，那再来说什么呢？那水平滚动条了，是不是跟它一样啊，哎，那当满足呢，其实就换一个值呗，那就什么了，死刻哎外wid PH减去一个什么呢？死刻一个，哎，Left等于什么呢？等于plant，哎，West那这块说明什么呢？哎，说明我们这个水平，哎滚动条是不是滚动到底了，哎滚动到底了啊，但是水平这块呢，我们不咋用，主要还是用这个什么呀，垂直诶垂直诶那同学说了，这玩意儿他有啥用啊，他爱滚没滚到底，我我也不关心是吧，爱到不到底，那现在我们就来说了，哎有的时候干嘛呀。

你上网的时候，你可能会有这么一个这么一个东西，上网可能要。注册对吧？注册它都会有一个什么呀，有那么一套霸王条款，诶有什么呀，用户协议，然后写一堆写一堆写一堆是吧？然后下边会给我一个勾，让你干嘛呀？诶诶我已仔细阅读协议是吧？然后打一个勾，我是不是才让你注册呀？诶如果你不打勾呢，我干嘛呢，不让你注册，但是这种网站现在还好一点，你还看不看都无所谓是吧？有些网站干嘛呢？他想啊，我非便先进写这么堆协议干嘛呢？你要不看我是不是亏得慌呀？所以他干嘛呢？他要确保你阅读协议了才让你干嘛呀，才让你注册，那问题来了，那他怎么确保你阅读协议啊？

诶，于是他给你这儿创建了一个什么呀，滚动条，滚动条你什么时候能注册呢？当你这滚动条拖动到。底儿的时候我才让你注册，如果没通到底，我是不是不让你注册呀？诶他以为这样你就读了，哎相当于你去读了对吧？诶这么一个东西，那这时候我们就可以干嘛了，我是不是就可以用它来判断我们这个滚动条是否滚动到底了，诶这东西见过吧？诶咱们来模拟一下这一功能啊来那这块呢，我来新建一个ML文件，来一个零七，我们叫一个小的一个练习练习呢，这里边我们来一个这个先写个页面吧，写个页面来一个H3 h3写个什么呢？哎，欢迎我们这个亲爱的用户注册啊，欢迎亲爱的用户注册，然后呢，一般这里边会有一个什么呀，会有一个这个注册协议啊，注册协议这里边可能写什么呢？想想啊，假设咱们先给他来个ID吧，ID咱们就随便写，叫一个in for啊，有一个in里边要写点啥呢？诶，我写点，诶亲爱的，呃，用户请仔细阅读以下协议。

以下协议如果呢，你不仔细阅读，诶你就别注册，哎，你别注册很横是吧，诶很横啊来一刷新诶不知道啊，CTRL1运行走，你是不是就出来了，哎，当然咱们这协议还有点有点少是吧？来咱们复制复制。走走走走走，哎这个应该够多了是吧，一保存哎就够多了是吧，哎够多了够多了是够多了，但是这东西也不对，你这东西还有点滚动条是没出来呀，你这滚动条不算吧，你得单独给这个P标签，是不是生成一滚动条啊哎来那咱们需要干嘛呢？呦，太长了是吧，叠起来啊来我们这死qui的标签，给这个P标签，我们这来设置一个这个样式，直接来一个这个井号一个诶来死qui来什么呀，死大井号一个这个in for in for里边我们来一个外来一个宽点的来一个300个像素，然后高度来一个head来一个这个500个像素，然后保存我们这一刷新走你诶是不是这样的效果了，来咱们给它设置一个背景颜色，看一下back个ground color，井号BV保存一刷新，从你，诶是不是这个效果呀，但是还是这问题，滚条是不是没出来呀，哎来。

咱把滚动条给它整出来，滚动条整出来overflow凹凸啊凹凸，然后一刷新走，你这个滚动条是不是就出来了，哎，滚条出来了啊，然后咱们把这页面做完整，下边一般还得有一个什么呀，那有一个地方是不是让它打勾的地方啊，诶打勾的地方啊，来一什么呢？来一个来写一把它给打开了就给写起来啊，这边我们来写什么呢？写一个这个，哎，Input直接来一个input，既然要打勾tap，我们叫一个check check box check box写什么呢？写一个，诶我以。

仔细阅读协议啊，协议细节协一诶一定一定遵守，来简单写一下，咱们把这个拆boxs给它放放后头吧，应该是来保存，现在一刷新走，你是不是这么一个效果呀，往前好放后板。前面好啊，你看看你放心诶这样其实都差不多是吧，哪都行啊，根据自己需要这一点打勾，是不是现在同意协议了呀，然后呢，你还得给他提交提供一个这个按钮dut，或者就直接也来一个这个就就来个input吧，Input我们来一个这个萨就行了，对吧，咱们现在虽然没有表单啊，但是正常来讲我们是得有一个这个表单的啊这来一个什么呢？来一个这个tap，我们叫做一个subber me submit me，我们来一个这个，其他我先不写了，来一个value吧，Value来一个这个注册一保存，咱们来看效果，一刷新是不是一个效果呀，诶我一点这按钮就应该去让我去注册是吧，哎，注册，但是问题来了，现在咱们这没意义了，这东西是不是上来就可以随便点呀，诶随便点那么说了，你得什么时候才能点呢？你得看完这协议你才能点的呀，所以上来默认这东西干嘛呀，是不是你该点不了的呀？哎，点不了的那怎么办呢？来。

哎，有个属性叫什么呢？叫做第次able的，它指也是什么呢？第次able的来我们来说一下，都给它加上是什么意思呢？那叫做什么呀，不可不可用啊，不可用来那这里边我们来说一下，如果为我们这个表单项添加什么呢？我们这个deiv等于de，则什么呢？则我们这个表单项将什么呢？将变成这个不可用的一个状态，什么叫不可用的，我们来看啊，注意刷新看出来了吗？

是不是灰了，我点点点是不是点不了了，这也是点点点是不是也点不了了，哎就是这么一个状态啊，那现在你就可以来做这个功能了，但是你这玩意儿你一直不能点，是不是也不行啊，那什么时候能点呀，是不是这个时候就能点了，哎滚动条到底了，我就得让你能能点了，那来看这个东西我们来怎么去写啊，怎么写好来写我们这个GS代码还是上来心都不用，什么都不用想了，来一个这个window点一个onload等于个这个function，等于function呢，这我来写一个我们要实现什么功能呢？当我们这个叫什么呀，垂直，垂直滚动条滚动到底时，使什么呢？使我们这个表单项。

是不是可用啊，哎，使我们这个表单项可用，也就是说这两个input是吧，你都可用啊，哎，都可用，那现在问题来了。那我就得干嘛了，滚动条滚动到底了，那我是不是得先检查呀？哎，我需要先检查这个滚动条是否滚动到底了，那这个什么问题啊，我什么时候查呀，我这上来我查不查呀。不查吧，为啥不查呀？这滚动条是不是压根就没动啊？你这都没动，你查不查滚哪去没有意义了，那我什么时候查呀？当滚动条滚动的时我才查吧，哎，当滚动条滚动的时候我才要检查，哎，它是否滚动到底了？那问题来了，那我怎么知道滚动条的滚动了？

哎，滚动点滚动了是不是应该是一个事件呀，诶事件，那我们来看看这有没有这个事件啊，来直接回到我们这个什么呢？哎，这个你问他来看看有没有滚条滚的时间。这大概一看吧，还真没有啊，还真没有，那注意了，它并不是真没有，而是什么呢？这个表呢，它不全啊，它不全，所以这里边呢，不要过于过分的依赖这文档，这文档呢，它很多东西都没有啊，都没有，所以这里边呢，诶如果真的要查的话，可以再从这个网上去查一下，那今天呢，咱们我就知道了是吧，我就当这个文档我就告诉你了是吧，有一个事件叫什么呢？叫做一个安。磁扣啊，就叫一个盎死扣，盎死扣这个事件呢，该事件是不是调用的，该事件会在我们这个元素的这个什么呀，滚动条滚动时干嘛呢？出发啊，会在滚动条滚动时出发，所以现在我只需要干嘛呀，我是不是只需要去监听一下它滚条是否滚动啊，那事件有了，那事件我绑定给谁呀，绑定给谁，事件绑定给谁。

这滚动条是谁的我就绑定给谁了，滚动条是谁的，是不是那个P标签的呀，诶要绑定给我们这个P标签，所以呢，你P标签有个ID叫做一个infer，先来获取这个标签为这个in for的这个P标签直接来一个什么呢？挖一个这个iner等于一个这个documentin的点一个盖的白ID来一个iner，然后呢，我这来一个来什么呢？来一个为它为我们这个in缝绑定一个这个什么呀，滚动条滚动的一个事件，滚动的这个事件直接来一个iner，点一个onk啊onk哎，它的兼容性的所有烂截都支持啊，所览都持等于一个function程，诶那这个回到函数什么时候掉啊。

是不是当这个滚条滚动的时候，哎，我这来一个alert alert一个什么呢？哎，我滚了，诶它是不是一滚动就出这么一东西啊，哎来我们看效果啊，这一刷新来走你诶是不是滚了呀，但注意他还不如滚了一下，我这一点呢，滚了干嘛呀，滚了好多下，你看他一下出出发好几次呀，哎我一点一下呢，啊出来好多啊好多，所以他这块啊，他我这点了一下，实际上它滚了好多啊，但是你看啊，我要滑一下滚轮这个事儿就更可怕了，我一滑滚轮。这卖完没了了是吧？哎，这卖了因为滚了好些次是吧？哎，滚了好些次啊，所以这块你们刷新一下诶就没了啊，你先别动它了是吧，就别动它了啊，所以这块呢，弹出乐的是很不明智的是吧？所以呢，你先不让他乱它了啊，这块一刷新这就没事了，哎没事了啊，但是还是那句话，它滚了，我这出来一个我滚了这没有任何意义是吧？它滚的时候我要干嘛呀，我说要检查呀，哎滚的时候我要检查检查什么呀，我们要检查我们这个滚动条是否滚动到底吧，而且还是什么呀，而且还是我们这个垂直滚动条是否滚动到底，那我怎么检查呀，我得判断吧，怎么判断呀，是不是刚才我们这等式啊，如果什么呀，如果我们这个in份点一个叫什么呀，叫做一个score，一个哎K，一个head减去一个in for点一个SK，一个top诶等等。

啊，等等于我们这个in for，点一个什么呀，点一个这个client height，如果这个等式满足，是不是就证明是不是能代语了，哎，或者你可以用什么，这可以用this代替啊，一样啊可以用this，来我这直接来一个alert一个，诶我已经滚到底了，哎，说白了，诶就不能再滚了啊，不能再滚了，来我这一刷新现在来看啊，你跟着使劲晃悠。

是不是都没事啊，哎，因为是没到底呢，时间晃，其实你说你到这儿快快卡你就回来，是不是也没事啊，哎，也没事儿啊，什么时候出来呢？来来来来来来，一到这儿咔。是不是就出来了呀，哎，即使你跟他再狠的话，他也不出来，只有什么呀，完全到底的时候才会出来啊，才会出来这一块说明说到底了，好，那现在我们已经可以判断滚动条是否滚动到底了，对吧？那接下来的工作是干嘛呀，你滚到底了不行了，滚到底你还得干嘛呀，这两个问你是不是这它能点呀，哎，所以这块注意滚动条滚动到底我们还在干嘛呢？滚动条滚动到底我们要使我们那什么呀，表单项。是不是可用啊，哎，使表单项可用，那既然要使这个表单项可用，毫无疑问我得先是不是获取到这两个表单项，哎，现在获取到这两个表现项，这两个表现项呢，我们就直接咱们也不用，不用给他整ID了，直接用什么呀，标签名吧，它是不是就就两个呀，哎，就两个直用我们标签名在外边获取吧，诶诶获取我们这个两个表单，像直接挖一个m puts inputs等于什么呢？Document点一个guides by tag name，根据标签名去获取，现在这个是不是就是一个。

数组啊，哎，那所以现在我有两个东西，一个是我直接写了啊，Input，一个in puts input一个什么呢？一个零，还有一个这个隐铺子，一个一是不是这两个东西啊，现在我需要让这两个东西变得。可用吧，诶可用，那怎么让它变得可用，诶那咱们这块呢，其实肯定是跟我们什么呀，这个属性相关吧，哎，那我们来看看具体怎么操作啊，还是来看一下我们文档，文档呢check box在这呢啊直接一点开来看它这个属性叫做一个这个第able的叫什么呢？设置或返回我们这个check box是否应被禁用啊，是否应被禁用来，那是怎么设置的，第次able的叫check box object object点一个disable等于true或者是false，那等于true是什么呀？诶等于true是禁用啊，等于处是禁用，看定是描述什么呀，属性设置或返回是否禁用，那true就呢是禁用，False呢就是不禁用啊，所以注意true是禁用，False是不禁用，那所以我们是让它禁用还是不禁用，不禁用吧？哎，所以我们需要干嘛呢？需要将它这个什么呀，Disabled设置为。

False这个里边是不是也一样啊，Disabled等于一个false吧，哎，都是等于false啊，所以这边我们来说一下IP的属性可以什么呢？可以设置一个这个元素是否禁用，诶激近应用禁用，哎，如果什么呢？如果设置为处。

则什么呢？则元素禁用啊，则元素禁用，如果什么呢？如果设置为false，则什么呢？元素可用啊可用有这么一个区别，好，那现在我们来看什么效果，一刷新呦嚯就直接过来了是吧，我一刷新啊现在呢。可能说F5强制刷新一下啊，咱缓存啊，现在是不可用的吧，来还是这东西你往下拖，往下拖是不是开始读了，走走走走走都不行，都不行，知道什么时候才行，滚动条拖动到底走，你是不是就可以点了，诶就可以点了啊，然后你就可以去注册啊，可以做这么一个小的功能啊，小的功能做一个这个判断好，那这块呢，我们就给他说完了啊，说完了当然这里边呢，正常来讲，我们这应该放到一个表单里的，我这块直接演示了，没有整一个表单啊，但是咱们就先。

做这个功能就行啊，做这个功能就行，然后呢，回顾一下我们刚才说这些样式啊，说这样式，嗯，说了两个，第一个叫做一个可land west，可head，获取的是我们元素可见的一个这个宽度还有高度，诶其实主要就是我们这什么呀，包括这个内容区和这个内边距啊，Offet west offet head是获取元素的整个的宽度和高度，就是包括内容区那边距，还有边框啊边框，然后offet part获取的是定位副元素啊，就是离它最近的开启的定位的组先元素，如果都没开就找谁啊，Body啊就找body，然后呢，下边这个off outside left，还有一个off top获取的是相对于其定位元素的一个偏移量，水平偏移量，还有一个垂直偏移量，然后呢，KK是滚动区域的一个宽度和高度，K leftk t是滚动条滚动的一个距离啊，滚动的一个偏移向啊，好，这是我们说的这个几个东西听一下。