04-jQuery/07-尚硅谷-jQuery-css样式操作

下午呢，我们来看一下几块当中的CSS样式的操作啊，那我们打开这个文档CSS样式的操作，大家看到就是这些啊，或者说是这部分啊，那么主要有哪些方法呢？主要方法是有这个in class，这是什么呢？这是添加样式，哎remove class呢是删除样式，Tri class呢是有就删除，没有就添加样式。那F呢，是获取和设置元素的坐标。获取和设置元素的坐表啊，那么我们看一下它的这个练习，看下效果哈，我给大家演示一下，然后第四天里面打开它DEMO里面有这个CSS样式操作啊。我们打开这个带有下划线的，打开它，然后运行一下，大家看一下哈，这里呢有四个按钮，每个按钮就表示我们要演示的那个功能的一个方法，好，然后你简单看一下。

在这边你看啊，上面呢是一些CSS样式啊，然后这里呢是引流这个宽位，这里呢是页面加载完上之后，以及查询一个div啊查询一个div，那么下面就干嘛呢？就是绑定这些按钮的单机事件了，哎，好，那么下面这个表格，整体上这个表格，然后一行两个单元格是吧，一行两单元格，第一个单元格里面是有一个div。啊，这个div是一会用来承接这个样式的操作的啊，那么这些按钮呢，就是这四个啊，那接下来我们就一个一个看吧，那第一个按钮class就添加样式，那大家注意看看啊，这个地方查第一个div就是谁呀，就是就是它。

一会儿我们点了一个，点了按钮以后对它进行添加删除这些样式，那么其实已经查好了啊，查好以后我们来看一下大洛夫bv element.class。好，添加一个样式，都有哪些样式可以用呢？大家注意看，呃，有这个红色的背景，有蓝色的边框，我们把一个红色背景都拿过来。好，那么刷新一下，点击你看红色背景就出现了。那他到底做了哪些操作呢？F12，看那个元素里面。好，打开这个table，大家仔细观察一下。注意看哈，我可以先刷新一开始的时候这个div啊，就最早的这个div，它其实里面只有一个央视叫做border啊，你看只有border，当我们点击了添加之后，这里就出现那个red DA，这就是我们刚刚添加进来的那个样式啊，这就是我们添加进来的那个样式，好然后呢，你也可以一次添加多个样式，这是一个当你添加多个的时候，由空格进行分割那个样式，比如说我再加一个蓝色的边框，我复制。

放到这里面来，OK，那我们刷新一下走。它就会一次添加多个啊红色背景啊蓝色边框，好，那么你看上面上面就能看见这个效果。看怎么做的呀，别lo column，红色背景嘛，不是边框哈，好。这是添加样式，那么大家可能就会问了，老师，这个样式我以前没见过，你讲过呀，嗯。

大家注意看这个样式是啥意思？这啥意思？大家记住啊，前面这个表示标签名点，后面这个是一个类型选择器，那么前面这个标签里的作用是限定我当前这个样式只能给div使用啊，你给其他的标签使用，那就没有效果，我举个例子。比如说我在这里啊，加个div好啊，然后glass哎，它就出来了，它就出来这么几个嘛，嗯，比如说呃blue就随便加点内容，就这蓝色边框就出现了吧，啊蓝色的边框就出现了，好，但是如果你这是一个S，它有效果吗？

没有啊，师跟我们说的一样啊，OK，那么前面这个spendin啊，这个div是表示限制我当前那个样式只能给div这个标签使用啊，给其他人用了就没有效果，就这OK，那么我们接着再来看一下删除，删除样式同样是对这个对象呢进行操作，叫remove，那么写上你要删除这个样式，比如说red div点啊就刷新一下找添加，我们同时添加了红色背景，蓝色边框，那删除呢，红色的就删掉了。啊，或者说你也可以一次删掉多个，比如说blue不成好，那么注意看啊添加。删除都没有了，X12你也可以通过这边其实也能看见一些端倪的东西。就比如说添加看见是吧，那删除是没有了，就这样一个效果好，当然你也可以删除的时候什么都不写。

然后就会全部删掉。可以吧，我全部删掉，OK，然后我们再来看一下class class是啥题，刚刚写的就是有就删除，没有就听到这个样子啊，刀图刀，诶怎么出来呢，大图div element element点是狗。Class，咱们就写一个RA div就行好，那么这个时候大家注意看，它会反复的切换，一开始的时候没有的，那么你点击它就会有，就添加了，你有了以后呢，再点它就删除，那它就删除，OK，然后我们再来看最后一个offet of是干嘛呢？

互取和设施元素坐标的，那么我们看看吧，坐div element of，哎呀好，然后呢，哇吧啊，我们就把这个呢往控制台打印一下，好叫做POS，那么我们稍微运行一下F10号，大家可以稍微看一下啊，我先把它添加进来，然后看控制台，我点击。就看见那个坐标，这个坐标里面有一个叫top，一个叫left top是什么？对，就就是这个点，你看啊，首先它是这个元素左上角。到这个白色区间这个窗口啊，这个左上角顶上的距离，简单的说说到这里的距离吧，是吧？啊它的上面的距离，那么这个距离是多少呢？就是11，那么这个左上角到左边这个左上角画横向的这个距离叫做251.5这样数，这样好OK，那么就是获取，你也可以设置，你也可以设置。

好，大家注意看啊，Dollar，第二位，Ofet。好大括号，然后呢，它需要两个值啊，一个top，一个LA，那么top呢，就是距离顶上的距离，咱们给个距离呢，稍微远一点，左边的距离呢，也给的稍微宽一点，比如说50吧，少一点叭，刚刚要小一点，好那么这个时候我们你看啊，我一点击它就会按照这个坐标去移动。

看到吧，啊，距离左边的距离，诶来这这个屏幕分辨率为了上课啊，看到很小就想看东西，看不到了啊来注意看它距离左边这个距离再再拉长一点，再拉长，诶这是不太对的是吧？啊我看看我是不是少了这个像素啊，我刚才打印的时候看一下打印一下。刷新一下出来显示she啊，这个扶直了是吧，我先不扶直啊，看是什么效果，我想这么直好像不太对，来刷新一下点击。

那么后续再看是这个值吧，OK。确实跟这个屏幕有关，你看跟你这个如果有变化的话，它这个值也会有些变化，大家看见吧，啊那么这个设置呢，也是根据这个当前的一个大小来的。啊，是按照当前的一个大小来的，然后我现在把它解开来走点，是按照当前这个屏幕大小来设置一个值，看见吧，嗯，好的。OK。