107.尚硅谷_JS基础_操作内联样式

再来接着来说我们这个呃，Do皮的操作，那do呢，之前无论是增删改查，实际上我们都是在操作什么呀，你看我这增加往里边是不是增加一个这个TR啊，诶我这个增这这还没实现呢，是吧，这里增加是不是增加一个TR啊，那我增加也好啊，删除也好，我删除的是什么呀，是不是都是我们这个HTML这个标签啊，所以现在我们的盗墓操作一直都是他操作什么呀，操作我们的这个HTML，换句话说操作我们这个什么呀，结构对吧，结构，那你光头的结构这功能还比较单一，我们需要可干嘛呀？是不操作我这个表现呀，也就是操作我这个CSS样式吧，哎，样式，所以接下来我们来说什么呢？来说一下，使用DOM来操作我们这个CSS，哎，使用我们这个do来操作我们这个CS，那我们来看怎么操作，那我要操作它呢，我们先来准备一个东西吧，先来创建一个什么呢？创建一个div div直接给他的ID叫做一个这个BOX1，然后呢，我们在这给他来设置一个这个样式，直接井号BOX1 box1我直接来什么呢？来一个这个。

哎，来一个这个west west来个什么呢？200个像素也来一个这个200个像素，然后background color，我来一个这个，诶来一个这个red，一个红色的一个什么呀？诶是不是正方形红色一盒子对吧？我这一保存CTRL1运行，是不是出来一个，出来一个它呀，诶出来一个它，那现在我们要做一个什么功能呢？哎来我在这呢，加一个按钮，加一个按钮，我方便测试一下BT do button，然后给它一个ID，我们叫做一个BTN第一，诶我们来一下，诶点我一下，他们什么也不写，就直接写点我一下，他们方便我们去操作一下。保存现在一刷新是不是这么一个结构啊，哎，这么一结构，然后我们来写我们这个代码，直接来一个script的标签，来什么呢？先来一个window，点一个onload，等于个这个function，那我希望实现一个什么功能呢？我希望做这么一个功能叫什么？点击按钮以后修改我们这个什么呀，BOX1的这个大小，诶修改我们BOX1的大小，那大小无非就是什么呀，宽度这个高度对吧？诶宽度还有高度，那这块我要怎么办？还是现在找找到等咱们会得来是吧，你要修改BOX1的大小，你现在干嘛呀？诶你现在获取BOX1是吧，然后Y一个BOX1等于一个do的点一个盖按的摆呀ID，然后来一个BOX1，而且你还得干嘛呀，点击按钮以后就改了，诶所以你还得干嘛呀，为我们这个按钮来绑定，单击响应函数，直接Y一个B天N01等于一个，这个什么呢？Document点一。

一个加100IDB填零一，然后呢，B天01.1个on立等于一个方式，是不是写这么一函数，然后呢，我来一个这个alert，诶不要alert，哎，Alert测试一下是吧，Alert一个这个HELLO1保存咱们来看效果，一刷新这一点是hello出来了，哎，Hello出来了啊这块就执行了，但是这里边我要干嘛呀，在这儿我来要修改我们这个BOX1的这个大小，那或者来说什么呢？就直接修改我们BOX1的一个宽度啊，修改我们box机的宽度，咱们在这儿来看，那这块我要怎么去改它这宽度。

诶，那就要涉及到了我们什么呢？我们这个如何去修改我们这个样式，来通过我们这个GS来修改我们这什么呀元素的一个样式，来说一下它这个语法怎么写的，叫做什么呢？叫做一个元素，点一个什么呢？点一个sta哎，我们这个样式，然后点一个什么呢？点一个这个样式名，然后等于一个叫做一个样式值啊样式值就这么一个固定一个语法元素，点style，点一个样式名，等于一个什么呀，样式值，那举个例子，现在我想修改什么呢？我想修改BOX1的宽度，那元素是谁呀？是BOX1啊所以我是什么呀？诶box1.style，诶然后呢，再点一个什么呀，样式名，样式名是我们什么呀？With是不是我们那个外呀，然后等于一个什么呢？等于一个样式值，诶，那等于多少合适。

我们来看现在是200是吧，我想让它宽点，那比如说我来一个什么呀，300，但注意我这样写行不行，哎，少一个什么呀，少一个，那我这么写行不行，这不掉东西了吧，所以注意这个需要是一个什么呀，字符串啊，一定注意它需要是一个字符串，然后我这一保存，咱们来看效果啊，那这句话表示什么意思，修改BC的这个样式，诶这个宽度为什么呢？为300像素，它原来是200，我改完了变成300，它是不是应该就就宽了呀？哎，来我这一点走你就宽了呀，再刷新刷新一下我这一点咔，是不是就宽了呀？哎，那这个东西是不是非常简单呀，你说修改这个宽度，不过行了，还想同时修改什么呀，修改高度是怎么改呀？box1.style，点一个PA等于什么呢？也等于300像素，我这一保存，咱们来看这一点走你。

是不是又变宽又变高了呀，诶又变宽又变高了，这块他们可能明显一点，来一个什么呢？来个一百一保存，现在小了，我这一点是不是变大了呀？诶变大了啊这么一个效果，通过我们这个带可以修改我们这个元素的样式，什么样式都行啊，什么样式都行，那现在我们说了修改大小也不过瘾了，我还想修改谁呢？修改这个颜色，颜色我一想颜色是什么呀，是不这个叫做BA GR background color是不是背景颜色呀，那我一想根据这个经验，直接什么呀，直接一点点background color等于什么呢？等于个这个我这么写行不行。

行不行，这减号你看着有没有点别扭，你这一瞅是不是像个像个式子了，对吧，是不是两个变量做减法去了，哎，我们看看行不行啊，看看行不行，来我这一保存，这不用试了啊，是不是给你报错了呀？哎给你说这个左值的错误啊，指左值这个错误，诶为什么错误呢？因为这个减号是我们一个什么呀。是一个运算符吧，哎，一个运算符啊，注意注意什么，这里边儿一定要注意注意，如果我们这个CSS的这个样式名中干嘛呢？含有什么呀，含有这种减号啊，它只有减号啊减号那么注意呢，这种。这种名称在我们这个GS中是什么呀，是不合不合法的，比如比如什么呀，就是我们这个background的color这种名字呢，是不合法的，因为这一什么呀减号他会认为干嘛呀，你像这两个变量做减法了啊做减法了，所以这块注意它是不合法的，那这里边那完了，那不合法了，是不是意味着我们就不能改背景颜色了呢？诶那注意了，我们需要什么呢？需要将这种什么呢，这种样式名修改为什么呢？呃修改为我们那个驼峰命明法啊修改为驼峰名牌怎么修改，直接就说去掉我们这个什么呀，减号啊去掉减号，然后什么呢，将我们这个减号后的这个字母大写，所以对于back你看了来说就是什么呀，把减号给它去了，然后把C变成什么呀大写，这就完事了啊，我这一保存咱们一点走，你是不是就OK了呀。

哎，就OK了啊，所以这块一定要注意去掉减号，然后把这东西变成大写啊，变成大写，那这里边呢，哎，那注意了，还有一些什么呀，假如说你说我有一个样式，我不知道怎么改，那可能我有什么呀，我有一个样式叫做一个叫做可能有一个boder top wise，上边块的一个宽度，假如说来什么呢？叫做一个，嗯，咱们举例子啊，我就不去演示了，叫做一什么呢？叫做一个border，一个top，一个这个诶上边块一个宽度，这东西我要改怎么改？哎，是不是把这个减号去掉，把这个T变成大写呀，这个是把减号去掉，把W变成大写是不是就行了呀？哎，所以这意啊，去掉减号，把这个首字母变成大写，那同学又说，老师这东西我还搞不清楚，还不会改怎么办？还不会改也没事儿，咱们来看什么呢？我们有文档啊，有文档，找到文档点开HTMCSS，有个CSS往下找，你想改哪个样式，你就找哪个样式，参考手册，比如说我想找背景有一个什么呢。

不让打color，我这一点开，我来看看啥呢，它这是有一个表格啊，表格在最后有一栏。加vascript的语法了，你看object.style.background color，人家是不是都给你写好了呀，哎，写好了，你说我那个border不会改，你搜一下borderder top不会改，找找border top是不是跟这呢呀，点开它来看borderder top是不是也给你写好了呀？诶所以你要忘了不会改的话，上这个文档里去看一眼，它都有限制这个什么呀，例子啊，限制这个示例好，那这个呢，就是我们说修改的这个这个这个样式啊这个样式，那这块就带来一个问题，我们来在外边一运行，我这一点这个样式是不是的确是的确是变了呀，诶的确是变了，那这边我们就要说一个什么东西呢？它修改样式，那我要改样式，我有两个地方可以改，一个是什么呢？内联样式对吧，还有一个什么呀，像我这种样式表里的样式吧，诶那问题就来了，那你说他改的是内联样式还是样式表里的样式，诶我们来看看，来看看这块怎么看呀，F12我们来看。

控制台选中元素，先看它现在里边是不是没有任何样式啊，哎，来我们这一点啊走你诶是不是多了一个style属性啊，诶所以你会发现我们改的实际上是谁呀，诶内联样式啊，改的是内联样式，所以这块你要注意我们说什么呢？我们通过这个这会改回了啊，通过这个style属性设置的这个什么呀，样式都是内联样式啊，内联样式我们说内联样式有什么特点呀，而我们这个内联样式有一个什么呀，较高的优先级，所以什么呢？诶所以通过我们这个呃，GS修改的这个样式往往什么呢？往往会立即显示啊，往往会立即显示，所以你会发现为什么就显示成我改完立刻就显示了，为什么呀，因为它是内联样式级比较高，干嘛了，就直接给你显示出来了，是不是甚至说覆盖了我这个ID选择器的样式，诶覆盖了I。

相声，但是你要注意，如果是这样的。诶，还记得这个吗？我说在样式边加了一个呀，表示我这样式很重要是吧，我这一保存咱们来看一刷新一点走，你妈伟这已经变成yellow了吧，但是这变不变呀，这是还是红色呀，为什么？诶就是因为这个可恨的一个啊，所以这块也是当时为什么说不让你用这个，用完这个以后我们GS就就废了啊，你用不了了，所以这块我们来说，但是。

但是如果在我们这个样式中写了什么呢？写了我们那个什么呀，Important啊，Important叫做一个这个叹号，叫做一个I pointnt啊，叫做一个叹号important，则什么呢？则此时我们这个样式会有一个什么呀，最高的一个优先级啊，最高优先级即使通过我们这个GS也不能覆盖该样式，那将什么呀，将会此时将会导致我们这个GS修改这个什么呀，样式失效啊，失效以什么呢？所以尽量尽量不要为这个样式添加这个什么呀，哎，这个叹号important啊，尽量不要写这个，因为写这个会给你带来什么呀，隐患，那有的时候你要注意了，有时候你发现什么了，样式改完了改半天干嘛呀，他没用诶，不起作用，那这时候你要考虑考虑什么呢？是不是这个样式，谁给你加了什么呀，你。

啊，你就想给它改一下啊，给它改一下这块要注意啊好，那这块呢，是我们说的这个它的操作是一个这个内联样式啊内联样式那这块呢，我们刚刚说的什么呀，是。修改是吧，诶修改，那我们来说呢，我再写一个按钮来个B填零二，诶点我一下二，那这块我来干嘛呢。再做一个功能。在这写吧，叫什么呢？诶点击我们这个按钮二以后，我来干嘛呢？我来读取我们元素什么样元素的这个样式，有的时候不光想修改，我还想干嘛，我还想读啊，读怎么读呢？还是先来获取我们这个按钮二，直接把一个BTN02等于一个do的点一个get w100idb tn02按钮是不是有了呀，然后来一个BTN02.1个on Le等于一个function等于function，怎么来读取样式还是读取样式怎么读呢？假设我还是读取什么呢？读取我们这个BOXS1的一个样式怎么读，直接来说语法也是，其实就更简单了，其实是跟它什么呀。

一样差哪了，哎，等于号是不是给他去了就行了呀，读你就不用赋值了，直接这么读就行啊，直接这么就行了，来那我要读取box机的，直接来什么呢？来一个alert，一个叫做一个box 1.1个style，点一个这个。这是读取什么呀，读取它的这个宽度啊，读取它这个宽度，我这一保存咱们来看效果啊，这块呢，刷新一下，我先点那个点五千二一点，然后现在宽度多少300是吧？哎，300我一点走，你是不是读出来一个300啊哎，读取Y你就点读句你就点hate啊来，我先把这个important给它去了啊，就去了保存，现在我这个刷新一点读he是不是也是300呀，一定注意它都是带什么呀，带PX这种值能不能直接计算呀，你说300PL加100行不行，加100结果什么呀。

一哎，是不是给你做一个这个拼串了，诶你做一个拼串了啊，它是一个字符串啊，它是一个字符串，所以这块一定注意啊好，那这里边呢，你说我要想读取什么呀，高能读了，我要读背景颜色能不能读啊，来我这1.1个来一个这个background，一个color，一保存，咱们来看一刷新还是先设置下现在是不是黄色呀，我这一读看是不是yellow啊，诶就读到了啊，很方便可以读取这个样式，但是你要注意有个问题，你看我读的时候，我都先点它一下是吧，不点它我读。

走你哎没有没有来一个换一个换一个万，我这保存一刷新走你就也没有，我这有没有外呀，是不是100呀，它怎么读不出来呀，哎，你要注意了，这个东西它设置设置的是内敛样式，读呢也读的是内敛样式，注意我们要说什么呢？通过style属性读取到的这个，诶设置和读取的都是内联样式啊，咱们这块咱们写下边吧，通过style属性读取和设置的什么呀，都是内敛样式，也就是说什么呢？诶也就是说它是什么呀，它而我们这块来看，我这个wise head，还有background color，这就是。

是不是都是样式表里的样式啊，哎，所以干嘛呢，它无法读取我们这个样式表中的一个样式，哎，那所以你注意我一上来他读不了一点是不是没值啊，但是当我点一下这个第一个按钮的时候，我一点现在有没有那个样式，有了我这一点是不是能读到了啊，经读到了啊，所以注意它读的是谁，是我们的这个内联样式，样式表里边的它是什么啊，读不读不了的啊，读不了的诶那我们说了，那我想读取样式表的这样式，我怎么读呢？诶是不是要采用一些其他方式了，诶那这个呢，我们待会再说，先停一下。