桓楠百科网

美女镇楼。

今天来了解下DOM改变CSS的操作语法。要使用JavaScript更改CSS属性，你可以使用

document.querySelector;
document.getElementById;
document.getElementByName;
document.getElementsByTagName;
document.getElementsByClassName;

等DOM元素方法来选择元素，然后使用.style属性来设置CSS样式。我们来实际操作一番，F12按起来

document.querySelector('.appmsg_editor_wrp').style.backgroundColor = 'black';

我们试了一下把公众号的编辑界面的背景颜色改成黑色，然后效果就是上图，原来编辑的文字内容就和背景融为一体了，乌漆嘛黑的！我们先改回来吧，不然打了什么字都看不到，哈哈

我们把左上角公众号的标改成其他背景色试试看，我们用document.getElementsByClassName方法

document.getElementsByClassName('weui-desktop-logo__inner')[0].style.backgroundColor = 'black';

果然能行，夜间模式的logo

我们再用document.getElementById方法试试更改左侧文章列表的底色看看?。

嗯，变过来了，黑色的最有韵味?。

我们再试试改一下文字的颜色吧，把编辑器中的文字改成红色看看，我们试了一下可以，我们使用document.querySeletorAll方法筛选出元素节点中所有的

元素节点，然后给

元素的style属性的color值设置为红色就可以了，然后出现了一个问题我们如果使用document.querySelector的话就会把元素中第一个

元素变成红色，我们使用的是document.querySeletorAll方法，将的到一个nodelist集合，需要分别给里面的项设置style属性的color值，然后我们想到之前使用过的for循环可以遍历整个nodelist集合，然后就是敲代码了，代码也简单，就两三行

var nodeList=document.querySelectorAll('body p');
for(var i=0 ; i

我们看到里面除了代码块里面的内容不是红色的其他的文字都变成红色了，那是因为代码块不是

元素的子节点，我们用个简便的方法，之前学过css选择器，里面有个*匹配所有元素的功能，我们可以使用document.querySelectorAll('body *')来筛选出元素节点的所有子节点，然后再用for循环遍历，就能实现元素节点中的所有文字变成红色了。看看效果吧

var nodeList=document.querySelectorAll('body *');
for(var i=0 ; i

?好了，今天的内容也比较简单，就是使用DOM改变CSS属性样式的方法。下次我们介绍下DOM事件的相关内容。