21. 尚硅谷_佟刚_jQuery_CSS DOM 操作.wmv原创

我们来看。结块RY的样式操作结块RY除了能够操作核心盗以外的话呢，这里边还可以来操作样式，我们看获取class跟设置class，我们可以使用achieve的方法。因为class是元素的一个属性，添加样式艾特class，移除样式class，切换样式糖果class。判断是否有某个样式用has class，我们把底下这四个方法的话呢，我们试一下。首先我们找到我们的一个练习。这个里边的话呢，怎么样，它是带样式的，所以说我把这个整个的复制完。GS到。

设置样式。测试。二。样式相关的方法，OK，我们先看一下。哎，那长这样好了，现在的话呢，我想看什么呢，我想看啊，我想看说就这个div吧，叫呃，Sub category box，我们想看说这个div有没有。第一个div哈，这个div里边有没有这个样式，很明显是有的，来第一个叫has吧，说某元指定的某元数，某元数是否有指定的样式，看吧。

第一个div。OK，有还是没有啊，是不是有啊。反正有这个样式好了，有这个样式的话呢，下面我把这个样式给他移除，移除样式。Ctrl c ctrl v class移除再看。

移除了吧，样子都变了呀，那这个时候要是再看的话，这就应该是。放了再看有图放好了，那放之后的话呢，我还可以给它添加样式。添加样式。爱的话。它是什么呢？它这个整个这个方法的话呢，特别的好，这个方法你看has remove ADD带过来刷新for又加上了嘛，所以说又有了。你打了一个什么东西啊。Two four。哦，不应该打印是吧，这个返回是应该是div是一个柱组。

OK，这是添加样式，好，刚才那个返回值的话呢，为什么会有一个返回值呢？因为我为这个div加完之后的话，这个返回值是不是还是这个div啊，但是div的一个数组。OK，好了，这个搞定之后的话，我们再看叫切换样式。切换样式什么意思呢？有的话我给你去除，没有的话我给你加上要切换说有的有存在去除和。去除。没有添加，哎，这样写好吧，这样写的话呢，我们这个div有点问题哈，应该是第一个div，这个div应该是不带的，所以说我们这样写一下改成。

第一个。啊，怎么办呢？我决定给这个div加上一个试卷，当我点这个click的时候，我可以实现切换样式给这个div。DV加一个减函数，然后说什么呢？然后说。我们可以。啊，通过点击这个div来切换整个这个样式，来切换这个样式，首先我们看这里边是不是是不是有超链接啊，我先得取消这个默认行为，否则一点就跑了，对看。然后呢，我要切换样式。

The Congo class。保存来看。好点它好，这是不是切换的一个效果呀，这里不用管，这是浏览器里边的一个bug。这叫什么？这叫切换样式，那意思就是有的话我给你去除，没有的话我给你加上，哎，以上这四个方法是杰query跟class相关的四个方法，Has class，云木class class to class。好，那跟CSS相关的还有什么呢？我们可以获取和设置，嗯，样式属性，比方说我们前面那个background，我们就是不是这么写的CSS background后面写个颜色，后果后边不写那个颜色的话，是不是为了获取某个样式属性啊？

我们还可以获取和设置元素的透明度。获取和设置宽度和高度，然后呢，还可以获取元素在当前视窗的相对位移，就是那个，嗯，X和Y包含两个是吧，这是一个事件。啊，这是一个函数啊，这个函数返回值的话有两个属性，一个是top，一个是left，我们来测一下第一个的话，前面我们已经说过了，我们不说了啊，现在我们来看一下设置和获取元素的透明度的属性C，这个也是通过CSS来设置的，看直接说在这里边五说设置和获取这个透明度进了一个。是吧？

div.S谁呢SOK，然后我把这写完之后的话呢，我再设置一下CTRLCCTRLC度给它设置为。0.5看一下效果。穿这个。关心。现在通讯录是不是一呀，注意看是不是变得。有点模糊了是吧，0.5。这种半透明是非常吸引人的是吧？啊，通过这样的方式来设置这个透明度，那这块的话呢，我们实际上也演示了一下这个CSS的使用方法，起码我们已经用过了啊。看六我们看下一个关于什么呢？Y的和配置设置宽度和高度，宽高度啊，我们看不出来C这个。

开发者工具看这是我整个的，包括整个的div在这呢，哎，我现在的话呢，我可以啊，这也是一个div，这是个ul，好了，现在的话呢，我可以让这个div的宽度和高度发生变化，我们看一下。使它的宽度和高度发生变化，首先的话呢，CTRLC。因为。Four。Wise。先看一下具体这个结果是啥样的。

好吧，然后呢，我们这样来写。我指定两个值。哎，比方说我们先看中那个直就是几啊。Don'right。这个吧。六百一百三十六好了，600和136，于是的话呢，这个我写为400。对嘴80。这个呢，就要通过他看他。六百一百三十六，好了，你看我是不是把这宽度是不是改了呀，这呢，这个时候怎么样，它立起来了已经是吧，宽度和高度通过这样的方式的话呢，我们可以给它进行改变，这是相对应的两个方法，分别是hit跟we，我们再看获取当前视窗相对位移的方法，当前元素哈，当前元素所开视窗位移的方法。

七。那我首先的话呢，我需要干什么，我需要找到这个，这个就是他吧。C我们看一下这应该是。还有两个属性，一个是top。是。我在。看效果。好四十三百零七，40是谁，第一个是这个307。

这就是40和307，我可以获取这个相对位移，然后的话呢，比方说我们做一些特效的话，我们可以用我们我们可以来利用这个位移。