108.尚硅谷_JS基础_获取元素的样式

这说了一个这个style属性，Style属性比较简单，它的作用呢，就是干嘛呀，就是去修改或者读取我们这个内联样式对吧？诶内联样式，但是它呢，会有一些局限，它只能读什么呀，只能读内联样式，那有的时候需要干嘛呀？诶我需要获取到很多是样式表里的样式，或者说是我们当前的一个样式，那这个呢，用它就不行了，所以呢，接下来我们来说另一个东西叫什么呢？叫做一个读取我们这什么呀，读取我们元素的一个样式啊，或者读取元素的一个当前的一个样式啊，那这里边还是我们来写这么一个页面div，来一个井号一个BOXS1，呃，创建这么一个div，然后呢，我们写一个这个style标签，来一个这个井号box box1，这里边Y来一个100个像素，Hat也来一个这个100个像素，然后呢，Background color，我们来一个这个yellow这么一个颜色啊，那现在呢，我们来说一下，写这么一个还是啊，写这么一个按钮，BT button来点我一下。

这来一个这个ID，我们叫做一个这个B天零一保存，然后呢，加俩换行啊，咱们这看虑清楚一点，保存CTRL运行，咱们这样吧，咱们在这个IE里来看看打开，诶是这么一个情况对吧？诶一个黄色一个div上边一个按钮啊一个按钮，那现在呢，我要读一它样式呢，我来一个这个script的标签，来一个这个script的标签写一什么呢？window.window点一个onlo的等于一个function，等于function，我们要写一什么功能呢？我要读取我们这个box的一个样式叫什么呢？叫做还是点击按钮以后读取我们这个BOX1的一个样式，那这块怎么玩呢？直接来一个先来一个Y一个BOX1等于一个document，点一个GET100ID box1，然后再挂一个这个BTN01DOCUMENT点一个百。

在第第填零一，这是我们说的按钮获取到了，然后呢，D填01.1个on等于一个这个function，好，那整个这一块工作呢，都给它整完了，那都给整完了，那现在我要读取box的样式，假设我想读取什么呢？读取我们这个BOX1的一个宽度，那我就干嘛了，Alert一个这个box1.1个style点一个这个Y，但是这样做呢，它有一个局限，什么局限呢？它只能读取内敛样式，而我们现在有没有内联样式没有，所以你这一刷新一点是不是压根儿读不出来呀，除非你干嘛呢，你给他写一个来一个外来一个这个200个像素已保存，可以刷新这一点出来读取啊，诶所以注意使用style只能读取什么呀，内联样式啊，只能读取内联样式，那你这操作就不方便了，那有些情况干嘛呀，假如说有些情况我还是想去修改我们报黑的一个宽度，那我得先干嘛呀，可能我希望在它这。

啊，原来宽度的基础上增加100，诶原来宽度基础上增加100，那我这块就得干嘛呀，我是不是要需要获取到它原来这个宽度啊，但是问题来了，我这这种方式干嘛呀，我是不是获取不到啊，诶获取不到，所以就有一点这个局限了，有点限了，那这块我怎么办呢？那我就想办法来干嘛呀，是不是要获取到这个内联样式，哎，内联样式啊，所以这块不是内样式，我们这个样式表里的样式啊，样板里样式，我们来说一下怎么来获取我们这个元素什么样，当前显示的一个样式，那怎么获取呢？我们来说一下语法叫什么呢？也是元素之前我们什么呀，之前我们用的是style，这个换了叫什么呢？C叫current current me，当前的是吧，哎，Current style啊current style点一个什么呢？点一个样。

是名啊，元素点current style，点一个样式名，那我们说它可以干嘛呢？其实比我们这style是不是多了一个这个current呀，诶它可以干嘛呢？它可以用来读取我们这个当前元素正在显示的样式，注意它也不是专门读取内联的，也不是专门读取样式表的，它是什么呀，当前正在显示的样式，换句话说，当前元素多宽，它就给我返回什么呀。反回做宽我们来看效果啊，现在我直接来一个aler的还是读宽度，这回我们就不用这个style了，直接来什么呢？Box1.1个CU int current的style点一个，我还是读宽度，那你现在来看我有内链样式吗？没有，咱们来看效果啊，一刷新现在是不回来了，哎，我这一点走你多少了100，那这个100是不是就是我们样式表的样式啊，哎，那为什么读到100，因为什么呀？因为我们现在元素显示的宽度是不是就是100啊，哎，就是100啊，所以注意它不一定读的是这个样式表，咱们来看什么呢？现在我来一什么呢？Style，我来一个这个200个像素，现在来看我这一刷新它的宽度是不是变成200了，哎，200了，那我们来获取一下，看是谁走，你是不是200啊，这个200又是谁了，是不是那连样式啊，所以注意它获取的什么呀，获取的是当前正在显示的样式，谁生效就干嘛呀，就获取谁，200生效就获取200 100生效就获取100啊，谁生效。

就获取，那比如说我这来一个来一什么呢？来一个background color，我来一个这个red我已保存，现在我一刷新现在是红色呀，好，我这来干嘛呢，获取它的这个背景颜色。直接style点一个background color我一保存，那现在我来说获取的应该是谁？红色还是黄色，是红色呀，因为红色是不是生效了呀，哎，红色生效的啊好，我把红色给它去了，我已保存可以刷新该谁了，是不是黄色呀？哎，谁生效就获取谁啊，谁生效获取谁，那你说我这黄色也没有。

没颜色是吧，那你说后几人走你叫什么呀？穿什么呀，透明的这是什么呀？这是不是我们背景颜色那个默认值啊，诶background color它的默认值是不是就是transparent呀？哎，Transparent啊所以注意它干嘛呢？谁生效它会什么呀？获取诶当前显示样式如果什么呢？如果当前元素没有什么呀，没有设置该样式则呢，获取它的这个什么呀，默认默认值，那我们来看这块，假如说不设置外块元素，不设置Y宽是多少。是不复元素全部啊，我这一刷新。没保存。嗯，我这还有一个内联样式呢，是吧，把这内联样式给它去了，一保存，我们一刷新是不是全部啊，诶现在我一获取走，你这还颜色的是吧？来一个入掉获取我们这个宽度这一刷新，然后一点凹凸，诶为什么凹凸啊，诶宽度的默认值是不是就是凹凸啊，诶所以它会到这个默认值，不管你怎么变，它其实都是什么呀，凹凸，但是这个呢，其实不好，为什么不好呢？凹凸这东西不准我们希望法呀，它是不是多宽，你给我返回什么呀，但是它这有点小缺陷啊，你要注意它会给你返回一个凹凸啊，返回凹凸。

好，这是我们说的这个叫做一个current style，可以获取我们元素当前的一个样式，但是这里边呢，你会注意到我其实用谁测呢？用IE测的是吧？用IE测呢？为什么I用IE测呢？直接来个boss1.1个这个CU in current style除了IE是彩色的，是不是都是灰色的呀？哎，换句话说，它只有谁支持，哎，只有IE支持来chome。这一点呢，没用啊，诶你F12诶都他就他就该我这没没写是吧，来写一个我这刷新你这一点是不是报错了呀？哎，就报错了啊，不能读取一个属性背景颜色从谁啊，从这个看你发的，所以这里边你要注意这个属性其实挺好用的，用起来也比较简单，但是唯一的缺点就是只有。

只有IE支持啊，只有IE支持这一点呢，就就就就没用了啊，他肯定是控制台又给你。是不是又报错了，哎，Type error给你报错了啊，所以这东西虽然这东西虽然好用，但是这个呢卡就style带这个代。只有什么呢？只有我们这个IE浏览器支持，其他的这个浏器呢，都不支持，那这完了，其他浏览器都不支持，那咱们得想想别的办法了吧，诶想别的办法那怎么办呢？诶别的浏览器呢，稍微的麻烦一点，在别人在其他浏览器中我们可以使用什么呢？呃，在其他浏览器中我们可以什么呢？可以使用我们叫做一个叫做一个什么呀，Get com get commut的带这个什么呢？哎，这个方法哎来获取我们这个元素的一个什么呀，样式啊，来获取我们元素，哎当前的一个样式，它的作用和这个current style一样，只不过是什么呢？Current style是个属性，而这个是什么呢？这个是一个方法，而且这个方法什么呢？哎，这个方法是是我们这个window的方法，哎，可以什么呢？可以直接使用啊是。

的方法，所以你要调它怎么调呢？直接来一个get commut style看这了吧，诶这方法有点意思，它什么呀？哎，九以上浏览器是不是都支持啊，哎，但是还是那问题，IE8是不是用不支持啊，咱们先不管它的支持性了，我们先看它怎么去用啊，怎么用，这里边我直接来说这个东西呢，稍微麻烦点，它需要什么呢？它需要两个参数啊，两个参数第一个什么呢？第一个你猜的是什么？

猜的是什么？哎，你要获取元素的样式吧，那现在第一个问题是什么呀？哎，你获取谁的样式对吧？所以第一个猜出什么呀，要获取第二个式的什么呀，元素啊，要获取样式元素，那我们要获取谁呀？哎，是不是BOXX1的呀？诶所以传一个BOXX1，然后还有一个第二个呢，第二个我们先了解一下行了啊第二什么呢？诶这第二个可以，诶传递一个这个伪元素，伪元素，但是伪元素这块我们没有讲呢，就是什么呀，说那些after啊，Before那些伪元素这个东西一般不用啊，一般不用，一般都传什么呀，传nu，所以注意第二参数，一般情况都传now，那以后你讲了伪元素以后，你知道什么是元素，那你可以获取那个什么呀，After或者比before，但是一般都不获取啊，一般都是什么呀，都是闹啊，都是那第二个参数都是那那这个方法调完了，它会给我返回什么东西呢？我们来看看啊，直接挖一个OB接它给我返回对象直接干嘛呢？Alert一个。

OB，咱们先看有没有A对象啊，保存看看我们这一刷新一点是一对象啊，诶CSS2什么pro啊，咱们不管它的对象是啥了，一刷新对象不一样啊，一点是也有一个呀，哎，也有一个在我们这个Chrome里，在我们IE里呢，一刷新是不是也有啊，哎，也有啊，都有那么一个对象，那我们来说这个对象是干嘛的呢？哎，该方法会什么呢？会返回一个这个对象，对象中干嘛呢？对象中封装了我们这个当前元素对应的一些什么呀，对应的一个样式，所以注意他直接给你返回一什么呀，返回来一个对象，如果你想获取样式的话怎么办呀？诶你说的点啊，你想获取样式，比如说你想获取外就点什么呀，Wise啊点外这一保存一刷新再一点是不是就有了呀，那就有了啊，所以注意这里边你一定要注意啊，如果要获取。

的话，你还得去点，或者你怎么写呢，这么写也可以，是不是直接写这一串呀，哎，所以为什么说它不太好的第一方就是什么呀，就稍微麻烦一点啊，稍微麻烦点，但是效果的事一样的，还是啊，我们这给他设置一个外来一个外来一个这个100个像素，我这一保存这一刷新，走你我这一点一百个像素吧，诶100个像素，然后再看我们下边这个，下边这个呢，我来给他指定一个这个内联样式，来一个style来什么呢？200个像素。哎，来一个这个外，我们来一个200的像素，还是有内联，也有这什么呀，也有这个样式表读哪个呀？诶谁生效是不是读谁呀？哎，我这一刷新走，你是不是就读了一个200啊，诶读了一个200啊，剩下的用法呢都一样，唯独就是什么呀，唯独就是获取对象的这个方式不同，他需要调这么一个方法，而我们之前那个需要用一个什么呀，Color style，但是你还要注意一个区别，注意什么区别呢？诶你要想读取这个background color也是什么呀，Background color是不是一样的效果呀？哎，我这一刷新走，你一读是不是读出来了，但是它读的就是一个。

RDB值啊，RDB值啊，这个效果，但是这里边我们要注意它有一个区别，什么区别呢？我还是回过头来读这个Y，读这个Y你要注意了，我现在还是把这个样式表里样式给他住了，然后呢，把这个宽度也给他住了，这个内联样式给他住了，我这保存一刷新宽度是100%啊，刚才我们用那个current style获取的时候，它获取到什么，是不是凹啊，哎，凹凸我这一点走你它是什么？诶是不是一个值啊，1350个像素来，我给它调窄一点，屏幕是不是窄了呀，窄了我们再获取走你是不是728呀，诶728我再窄一点。一点是不是三百三百五十五啊，诶它会获取到那个值，而我们刚才那个current style它是什么呀？凹凸这个也一样，是不是都是获取到的值啊，诶获取到值啊，所以注意诶对于什么呢？它俩有一个区别啊，其实这个区别呢，还是我们说这个get community style是不是更好一点啊，你给我来1AUTO压根就干嘛呀，没法计算啊，没法计算，所以这块我们说什么，哎咱们这先描述完整啊该对该方法会返回的对象，对象中封装了当前元素对应的一个样式，可以什么呢？可以通过我们这个对象点一个这个诶样式名来读取样式，诶如果什么呢？如果我们说获取的样式诶没有设置，则什么呢？则它会获取到我们那什么呀？诶真实的这个值，而不是什么呢？而不是我们这个默认什么意思，比如举个例子啊，比如我们这个没有设置我们这个wise，它什么呢？它不会。

获取到我们这个凹而是什么呢？而是一个什么呀，而是一个长度啊，而是一个长度，这个呢是和我们这个current style的一个区别啊，Current style就什么了凹，而它是一个什么呢？就是一个长度，但是有些情况呢，比如说你不设置背景颜色来看看这意刷新，诶，这还是获取的是那个宽度，下边我改成这个咱们注意。

再来一个，这个不不让他看了。不让你看了，保存一下，我们这一刷新走NY，它不是也是PAR，诶，但是因为它这个值呢，本来就是一个透明颜色，所以它就是PAR，但是对于宽度来说，它混到就什么呢？就是那具体长度，而不是out了啊，而不out了，所以注意它有这么一个小的一个问题啊，是我们这个current style的一个小的问题啊，这来一个yellow还是个成一个黄色好，那接下来呢，我们还有什么问题呢？那这其实我们就有点小问题了，什么小问题呢？看我狐脸一点。RGB值获取到好使对吧，然后看我们这个Chrome里一点是不是也获取到了，再看我们这个IE1刷新一点走，你也有是吧？哎，来看我们这个IE9。

走，你很争气是吧？来看我们这阿姨吧？走，你没报错是吧？来来，我这一点走你。多年。走你就不用走了是吧？点一下报一错，点一下报一错，属性get com style的值为now未定义或不是function对象，换句话说IE8里干嘛呀，它不支持这个是吧？哎，不支持这个，所以这个万恶的IE8是吧？最好能不用的是吧？最好能不用的，但是这里我们来说一个但是什么呢？但是但是但是我们这个什么呢？该方法它不支持我们这个艾叶。八及以下的这个浏览器啊，不支持IE8及以下的浏览器，那这块问题就来了，那如果你要兼容I1巴，那你怎么办？那我就不能这么写了，我得换一个，我得改了，改成什么呢？改成一个box1.1个current的带，这样一刷新A8是不是就有了呀？诶它是yellow，你看这处理问题很麻烦是吧，这是yellow那边R值，你看挺麻烦的，这一看呢，一刷新火狐，哎呦，火狐又不领了，哎呦妈呀，这咋整是吧？火狐里需要用两个东西，那也一样啊，你写完了以后，它还是包错啊，说这还是包错啊阿一八里它也一样，是不是还是包错啊，所以你发现又陷入了两难境地了，这个呢，是我们什么呀？这是我们这个正常浏览器的一个。

方式这个呢，是我们的一个什么呀？诶IE8的一个方式，那这里边呢，你要想兼容正常浏览器，IE8就不好使，你想兼容IE8其他浏览器它都不好使，那怎么办呢？我们陷入一个这个两难的境地是吧？诶那我现在想干嘛呢？我想正常我想干嘛呢，既兼容我们的爱业。

阿巴又兼容我们这个什么呀，其他浏览器，那这个东西我们要怎么用怎么用怎么办怎么办，那既然他给我们提供这方法不好使，那我一想不好使，我就不用你提供的方法干嘛呢，我自己。诶，我自己写一个行不行，诶我自己写一个所有浏览器它都支持的方法，诶那我怎么写呢？我来看啊，那这里边呢，我直接在这儿来定义一个函数，哎，定义一个这个函数用来干嘛的呢？用来获取我们这个指定元素的什么呀？哎，当前的一个什么呀，样式啊，当前样式直接来一个我们这个方式来一什么呢？就叫一个get塔代叫什么呀？是不是获取这个样式，哎获取样式我们先把这个结构给定义出来，那get style我们想想里边需要什么参数，首先我们想想第一个需要什么呀？诶，你要给哪个元素获取样式吧，所以第一个来什么呢？来一个OB接啊OB接，那第一个参数我们叫什么呢？叫做参数，第一个我们叫做一个OB接叫什么呢？要获取。

样式的这个元素吧，哎，你要获取哪个元素的样式，那第二个呢？哎，那你要获取什么样式吧，哎，你要获取哪个样式，那我就直接来一什么呢？来一个这个name吧，哎，Name是我们这个什么样，呃，要获取的这个样式，样式名吧，诶样式名，那现在我们来看看那这块我要怎么写，那怎么写呢，我来想想，那我这OB贴有了，Name也有了，那我这么写一个，直接来一个。诶，那我这是不是需要返回，把这个样式值是不是给你。给你返回啊，直接来一个，来一什么呢，叫做一个get commut style，我这来什么呢？来一个obj obj是不是我获取那个对象啊，然后逗号来一个这个，那那这样给我返回的是一个什么。

这个方法给我反映的是一个什么，是个对象吧，但是我要的是什么，我要的是那个那个样是吧，如果你这是background color，我就获取背景颜色，如果你是我是宽度啊，所以我不要对我要的是那个样，那我这写一什么点行点。不行吧，点name这什么意思呀，是不是获取那个名字为name那个样式啊，而我这name是个什么呀，是个变量吧，你这写是不是写死了呀，那怎么写。怎么写？还记得这个吗？还记得这个吗？是不是中括号点内呀？哎，我通过那种中括号的方式去取这个样式，如果name是我是不是获取到，如果name是background color，是不是获取到background color，诶这样就更加的灵活啊，灵活然后干嘛呢？我在这repi，我是不是将这个东西作为结果给它返回啊，哎，返回我来看好不好使，直接来一个alert alert一个什么呢？直接写了啊，Get一个style，那我这么写是不是打印的返回值啊，哎，返回值返回谁我就打印谁，那我来个对象，来个box c，然后逗号来个样式，样式来谁呢？来个YWTH保存，我们看效果，这一刷新走你一点。

是不获取到了，诶来看我们这个GROUP1刷新走你就获取到了，哎，就获取到了啊这块这个方法能看明白吗？能看明白吧？诶大家注意这有没有问题啊，我这一刷新IE8是不是还是不行啊，我这么一写，本质上是不是还是掉的这个getut style啊，你还是掉了它，所以指标不治本，那你想IE8我需要这么写，E8就不能这么写了，IE8就这么写呀，Re r，你这样一个叫做一个obj，点一个CU current的style，再来一个中号，来一个什么呀，Name，这是不是IE8的方式保存，我们来看一刷新一点凹凸是不是获取到了，哎，获取到了，诶来看我们这个CH走你完了，这是不是又包图来，诶但是你这方法我这写完了，这这这东西还是有问题是吧，那我们来说一下啊，第一个这是什么呀，我们这个正常浏览器的方式。

这个呢，是我们那什么呀，艾叶艾发的方式，那现在到这儿了，这方法我已经定义到这儿了，我们来看看啊，这种方式正常浏览器都好用，这种方式呢，只有IE好用对吧，那现在呢，现在到了一个两难的境地，要不然你兼容他们，要不然你兼容A，那我想同时兼容。那要怎么办，诶那要怎么办，待会你们自己来思考一下这个问题，要让你处理，你怎么处理啊，怎么处理啊，好，这是一个啊，然后我先给你留着了啊，其实就差一步了，就差一个最简单的一步啊，最简一步这块看完了，然后再回顾一下刚才那个东西啊，刚才写完了以后，我们用这个card style，我是不是获取了一个样式啊，获取样式呢，我这来看啊，咱们直接来看我们这个获取这个we吧，这获取了一个外啊，我这里边给他来指定一个还是100个像素，我这保存回到我们这个ID1刷新，我一点是不是获得获得一个100呀，那我就想干嘛呢？能获得我希望干嘛呀，我希望。

来一个等于一个这个200个像素，我是不是修改啊，修改注意了，你放心走你就完了，是不是报错了呀，告诉你什么对象不支持此属性或方法，那这块什么意思，我们来说一下啊，这块补充一个，在在这补充吧，通过我们这个cru current带和什么呢？和这个get cuted get commut的style读取到的这个样式都是只读的，不叫只读的呀，只能看，不能动啊，都是只读的，不能什么呢？不能修改，哎，换句话说，你只能通过它来读样式，不能改，如果什么呢？如果要修改必须通过什么呀，Style属性啊，必须通过style，所以注意这两个都是什么呀，只读的啊，都是只。

的，好，那这个两个东西都说完了，然后你们把这个current style，还有这个get community style一块去看一下，然后你们去想想我这个get这个方法要怎么去改啊，怎么去修改一下，好我们来听一下。