DOM改变网页CSS样式

myzbx 2024-12-02 22:46 15 浏览

美女镇楼。

今天来了解下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方法筛选出<body>元素节点中所有的<p>元素节点，然后给<p>元素的style属性的color值设置为红色就可以了，然后出现了一个问题我们如果使用document.querySelector的话就会把<body>元素中第一个<p>元素变成红色，我们使用的是document.querySeletorAll方法，将的到一个nodelist集合，需要分别给里面的项设置style属性的color值，然后我们想到之前使用过的for循环可以遍历整个nodelist集合，然后就是敲代码了，代码也简单，就两三行

var nodeList=document.querySelectorAll('body p');
for(var i=0 ; i<nodeList.length;i++){
nodeList[i].style.color='red';
};

我们看到里面除了代码块里面的内容不是红色的其他的文字都变成红色了，那是因为代码块不是<p>元素的子节点，我们用个简便的方法，之前学过css选择器，里面有个*匹配所有元素的功能，我们可以使用document.querySelectorAll('body *')来筛选出<body>元素节点的所有子节点，然后再用for循环遍历，就能实现<body>元素节点中的所有文字变成红色了。看看效果吧

var nodeList=document.querySelectorAll('body *');
for(var i=0 ; i<nodeList.length;i++){
nodeList[i].style.color='red';
};

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

HTML 样式

上一篇：如何制作图文并茂的HTML邮件，做好EDM营销
下一篇：Blazor显示html内容的方法

DOM改变网页CSS样式

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」