简述关于通过js判断dom元素去改变该元素的css属性

《简述关于通过js判断dom元素去改变该元素的css属性》

简述:

很多场景中,都需要我们需要去通过js去判断DOM元素,按照自己实际的需要去改变DOM的css属性。

例如,弹窗的显示和隐藏、背景图片的更换、导航icon的高亮等等…..

今天就来简单讨论关于 「关于通过js去判断dom元素去改变该元素的css属性来」

简单操作过程:

        1.关于style内联css;

给出一个实际的demo,「一个元素的显示和消失」

一般来说,我们都是通过js去获取dom的元素,进而去判断它的display是否为none或者block;

于是有了下面的示范;

《简述关于通过js判断dom元素去改变该元素的css属性》

这里示范第一步:首先通过document去获取相关的想要改变的节点元素,这时候如果需要进行下一部的操作,应该要去检验一下获取到的style是否存在;

 ok!  我这里log了H1的style:


《简述关于通过js判断dom元素去改变该元素的css属性》

通过👆的console可以看到H1的整个style信息,但是…..what,我在style明明添加了color:red,页面页渲染出来红色,但是为什么H1的style对象里面的color值为空!?

很明显,这样是无法进行下一步的,因为获取的值是空.

em….再来看一下下面的一个demo,再下定论:

下面换一种方式来设置css属性,既然style标签不行,那就来一份内联style:

《简述关于通过js判断dom元素去改变该元素的css属性》

ok,我们设置好了h1的内联属性,接下来看一下页面:

《简述关于通过js判断dom元素去改变该元素的css属性》

哇,终于看到了想要H1的style对象中color值为 red ,OK,这样就可以继续下一步,来达到自己的目的了。

同时,我们可以对比不难得出,element.style只作用于内联的css。

ok,我们可以看一下MDN的web API的解释:

HTMLElement.style属性返回一个CSSStyleDeclaration对象,表示元素的 内联style属性(attribute),但忽略任何样式表应用的属性。

可以看出来我们的结论和web API的解释是一样的。

2.ok,关于样式表的css;

其实,做到这一步,通过内联的css就可以达到预期的效果,但是我们这里做一下拓展,我们并不满足于只是内联的css,这样太麻烦了,而且很多时候会造成代码的紊乱和复杂,我们先想通过css样式表去获取:

说干就干,OK,上代码:

《简述关于通过js判断dom元素去改变该元素的css属性》

em….在上图好吧,更有说服力:

《简述关于通过js判断dom元素去改变该元素的css属性》

在这里可以看到,控制台有输出 rgb(255,0,0),这里一看就是红色的rgb值了,说明没问题。

这里有一个秘诀就是通过:

window.getComputedStyle(element,伪元素)

来完成对样式表的获取。

说到这里差不多结束:上个gif:

《简述关于通过js判断dom元素去改变该元素的css属性》 元素消失和显示的gif

博客原文:http://wusiqing.com/?p=222

    原文作者:Cc卿
    原文地址: https://www.jianshu.com/p/7910606fd02d
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞