00:00
好,下面呢,我们呢,给大家讲解这个第三章的这个知识点哈,就有关属性以及CSS样式的这个操作啊,以及呢,还有这个中括号,它的这个呃,另外的这个用法啊,就是我们之前呢给大家讲到这个中括号,然后呢,还有呢,就是这个HB的这个节点,这个属性啊OK,好,我们的新建一个文档在这个地方啊,在这里好,我们新建一个呢课件,好然后这个地方呢,再新建一个啊给来放视频啊好,我们在这里面呢,给他来个零幺,好零幺呢,我们先来给大家讲解一下这个属性,好我们我们在好这里啊这好给他来个div div我们给他。
01:00
好,给他一点样,给他一点样样式啊,给他一点样式好,我们给他来一个什么呢?好,给他来一个宽度,宽度呢给他来一个呃,100,然后呢,高度呢,给他来一个100PS,好,然后呢,背景色呢,好给他来一个灰灰色的好这样,然后首先呢,我们去获取这个这个标签element by by by,好,我们就在里面呢写个div。我们在这个地方来一下这个东西,Get element div,好,我们这个时候刷新,好在这个地方呢,他在这在这个地方呢,好给我们弹出了一个信息啊什么样的信息呢?好,它告诉我们呢,我们获取的这个div啊好获取的那个元素啊,它呢,是一个什么样的元素呢?诶它是一个对象啊,它是一个对象object,它指的是对象是一个什么对象呢?是我们这个啊HTML当中对吧?啊在一个div对吧,这里面一个div div元素是吗?啊没错,我们呢啊这个呢。
02:45
呃,这个这个去获取呢,就是这个div元素对吧?啊,获取的就是它,那么呢,这个里面呢,没错啊好,那么呢,这个里边呢,前面呢,在这个里面呢,刚才这里他提了个什么东西呢?指的是什么呢?指的是对象啊,这个指的是对象的意思啊,就是一个什么样的对象呢?是一个div,我们HTM的一个DV的这么一个这么一个对象啊,这么一个对象,呃,那么对象怎么理解呢?诶。
03:24
兑现这东西可以简单的理解啊,就是它呢,诶是一个,诶是一个东西啊,是一个东西,它这个兑现呢,就是从这个就是东西物体的意思啊,东西物体啊,东西物体的意思,好那么像我们这个物体啊,这些东西啊,对吧,或者对象啊,它有一个什么样的特点呢。它有什么特点呢,OK。
04:04
好,现在给大家这个里面我们这个属性和属性object,就说这个对象呢,Object是对象是吧?好是对象,那么对象呢,它有一个特点啊是对象啊,即可以有属性啊,即它呢,有可以就可以有属性啊,比如说啊,我们说对象就是一个物体对吧,而比如说他这个,比如说我们的这个,呃,汽车对吧?啊或者说苹果。
05:04
那么呢,苹果呢,它就有这个,它就有属性,有什么属性呢?它可以吃对吧啊可以吃啊,然后呢,它有这个重量对吧啊然后呢,它呢,这个里边呢,有这个呃有这个呃,那有有有有有果肉对吧啊有果肉这些呢都是它的这个它的一些属性啊,比如说人人的话呢,哎有手有脚。对吧,啊,会说话诶,这就是人的人的属性啊,那么不同的对象呢,它有不同的属性啊,不同的对象它有不同的属性。好,那么提到这个属性呢,大家可能有点呃有点呃对吧?啊,有点似曾相识对吧?什么呢?我们说这个div它就是一个对象,那么呢,它的属性对吧?我们说ID呢,就是一个它的属性,然后呢,拉呢也是它的属性,诶属性呢,就是他身上具有的呃,它的这个特性对吧?啊它的这个特性对吧?拉呢就是它的一个它的一个属性,然后呢,还有呢,它的这个style呢,诶也是它的这个属性。
06:18
啊,它的属性,那么这个对象,诶有这个属性,我们呢,如何去访问这个属性呢?OK,我们呢,可以通过这个对象,诶点加它的什么呢?诶加它的这个属性名好吧,比如说ID好,那么我们就可以访问到它的这个,诶它的这个属性值。好获取属性值。好通过什么呢?通过对象点好加他的诶属性名好就可以去获选,当然如果要是要是去改的话,对吧,好我们就给它附一个什么value啊,当然我们这个属性名呢,诶就是它的这个name是吧?啊可以这个它的这个name啊,当然对现的话,我们也可以写成什么呢?诶object。
07:19
对吧,啊,这个对象它的name啊,Name属性,然后呢,对它进行一个负责。啊,获取获取属性值,然后呢,这里面呢,修改修改属性值,修改属性值OK,那么这里面呢,可以获取对吧,我们前面也讲到过,我们呢可以对他重新负责。好,给它改成这个web,那么它变成了这个WEPOK,好,这就是它的这个属性啊,好的,为什么要减这个属性呢?好,因为呢,我们有这个方法,那么呢,哎,嗯,我们呢,就可以做别的事情哈,比如说呃,我们之前说我们这个东西呢,主要就是说这个这个javascript呢,主要是改变这个盒子的做一些动画,做一些特效,对吧,改变它的这个宽度高度,改变它的一些背景色啊,或者呢,给它做一个动画对不对?好比如说我们来一个简单的例子,对吧?好,如果说我们想要改变这个div,它的这个它的一个背景色,我们可以怎么做,我们是不是可以在这里边呢,写个backgroundlo,好backgroundlo呢,给他一个什么呢?给它来一个red是吧,给他一个红色的。
08:59
那么我们是不是他的这个背景色就变了呢?好,可以,那么我们这个地方呢,怎么样去这个,就是说我们是不是我们JS如果说可以改变这里面的值,那么这里面的话,这个div它的背景就会变起来呢?好答案是肯定的,OK,好,那么我们就来做一下啊好,首先呢,我们找到这个。
09:22
这个对吧,这个标签,然后呢,诶它我们找到它的这个style对吧?它的背景啊,它的这个style这个属性,然后这个属性呢,它下面呢,诶它这个里边呢,有一个样式属性对不对?好它下面呢,诶有这一个有backgroundlo对吧?OK,它下面的backgroundlo呢,我们把它给改成什么呢?OK,我们这里面不写了啊,我们backlo呢,就把它给改成什么呢?改成一个red OK,好我们来试一下啊,好我们来试一下啊,一开始呢,好,它是一个灰色的,然后呢,好我们改了之后,那么这个时候它就变成了一个红色的,好我们也可以通过在这个element这个审查元素这个地方可以找到是吧?好我们可以动态的给他添加这个。
10:23
OKOK的话打个一啊OK的打一,那么呢,这里边的话呢,就是啊啊我们的这个啊这个stop对吧?啊我们改变它的样式是通过什么呢?通过修改这个标签当中的这个style,而不是呢?诶去修改这个地方CSS式好它的这个内联样式对吧?它的内联样式而不是呢,这个什么呢?层叠样式啊好内联样式而不是它的这个层叠样式好当然这里面的话呢,如果说大家想让这个效果做的更好一点点对吧?好,我们呢,给他当我们点击的时候好,我们才做这样的一件事情好点击的时候好才做这样的一件事情好点击。
11:10
点击on click background function啊这里面呢,是一个function,把点击的时候呢,让它变成一个红色的,OK,当然的话,我们呢,也可以改变它的什么呢?改变它的这个它的这个高度,高度呢,给它变成什么呢?好把它给变成300PS走好还可以有别的对吧?好,我们这里边呢,它有什么属性呢?我们都可以对吧?Background的宽度高度啊,以及呢,你给它加一个什么呢?诶加一个边框,它的这个波的给它的值呢,为EPS受力的,然后呢,给它一个绿色的,好再走一下点击,那么呢,就给他加了一个边框。
12:11
OK,好,那么就是这个样子的啊,就这样子的,但是呢,我们在这个写的过程当中啊,在写的过程当中,大家需要注意的一点啊,这种呢,是我们的这种,呃,这种样式对吧?好,如果要是在我们的这个这里头呢,如果CSS。如果呢,遇到什么样的情况呢?OK,我们知道这里面呢,是一个backgroundlo对吧?好,如果要说我们给一个颜色呢,应该是就是说只是给一个颜色呢,好在我们的CS当中是不是这么写啊,Background color对吧?啊就说我们的CS在这个地方,就是在这个地方呢,写的话呢,是这么写的。
13:18
OK然是这么写的,那么在我们的,在我们的这个JS当中,如果要是这么写,它会它是不OK的啊,他是不OK,他会出问题啊,它会报错对吧,这样在是不允许的啊,不允许有这样子的,那么怎么办呢?OK,我们要把这个呢,也把它给去掉,然后呢,把这里面的改成这个大写的,好改成这种驼峰命名样式操作。
14:18
好OB点什么呢?点到对吧,好点到通过操作它来来做啊好来改变,好比如说我们在这里边呢,给它这里边呢写个呃写个写个高度吧,对吧,好举个例子啊好,那么呢,这里边呢,要注意的就是这个第一条对吧,好要注意的呃修改这个C这个标签标签样式啊,是通过他来完成的。
15:13
通过store好修改标签样式,要记住这么一点,第二点,呃,带这种横杠的好,要改成什么样子呢?要改成这个样子,要改成这个驼峰命名啊驼峰命名呢,就是什么呢?诶第一个单词呢,诶它这个首字母呢,是一个小写,第二个从第二个开始啊,后面的第三个也是一样,那么这里边呢,是一个大写啊,比如说background对吧?啊比如说background啊,当然我们这里面也举个例子,OK,好就有关这一个好,如果如果要是说。
16:13
还有什么样的情况呢?诶如果要说我们呢,这个样子写是不是很复杂呀,对不对,好写一个样式呢,这里面呢,我们就要写了这么多代码,对吧,加一点点样式对吧?我们这个这个是不是很爽快啊,对不对啊,很舒服啊好那么呢,我们呢,可以换一种方式啊好如果要是一次,这里面的仪次呢,只能够说给一个属性对不对,宽度啊边就是高度啊边这个边框啊背景设呀,好我们的仪次呢怎么做呢?好,我们可以借助这个,诶这个叫做CSS这个啊不是啊好,这里面呢有一个style,好它也是style下面的这个CSS,这个test,它下面给它副词,好这个呢,直接这样怎么写呢?诶比如说我们要给这个background,好,这里边呢,你怎么写就怎么写啊background好给他来一个red对吧,OK,然后呢,再给它来一个高度,高度呢给它来个300PS。
17:13
好,然后呢,再给他来个什么呢?边框EPS好,受力的好,然后呢,再给他来个什么呢?诶再给他来个green对吧,好颜色好,那么呢,它就一次呢,诶就把它给写入到像这样子对吧,直接写到到这里面去了啊直接写入到这里面去,好我们走一下好点击好我们可以看一下啊这个时候呢,然backlo好好hit对吧好board的都是OK啊都是OK,那么这里边的话呢,就是啊它的这个样式啊样式CSL点点CSS点什么呢?点test好可以呃修改多。
18:13
个样式,可以修改多个样式哦。
我来说两句