DOM改变网页CSS样式 dom设置style

zhezhongyun 2024-12-20 19:45 49 浏览

美女镇楼。

今天来了解下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事件的相关内容。

JavaScript 和 HTML DOM 参考手册

上一篇：[.net编程自学网]JavaScript DOM编程(二)
下一篇：一些JavaScript的入门知识 javascript基础入门案例

DOM改变网页CSS样式 dom设置style

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

接口测试遇到500报错?别慌，你的头部可能有点问题

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

关于HTML5被简称做H5，你怎么看?（html5缩写）

现在页面实时聊天都使用Websocket技术实现吗?