DOM学习4：利用DOM去修改CSS样式

最新推荐文章于 2025-06-15 14:13:34 发布
原创 最新推荐文章于 2025-06-15 14:13:34 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #浏览器 #html #function

本文介绍如何使用DOM技术来修改HTML元素的CSS样式，包括字体加粗、字号调整及颜色变化等，并提供了一个具体的实例，展示了如何通过JavaScript遍历并设置页面上所有<h1>标签的样式。

1.DOM中CSS的属性是采用Camel的方式来表示，如css中font-weight，在DOM中就是fontWeight。写过程序的人就很好理解这种方式。

 

2.值得注意的是，如果要取得CSS中样式的值，每种浏览器可能都不一样，比较取得color值，有的浏览器可能会是16进制的#00000，也有浏览器会取得的是 rgb (0,0,0)这样的结果。

 

以下是用DOM技术去改变CSS样式的一个例子:

 

foxmx
关注
【003JavaScript HTML DOM - 改变 css】JavaScript HTML DOM: 修改 CSS 样式的基本操作
燃正科技
06-07 715
在 JavaScript 中，我们可以通过操作 HTML DOM（文档对象模型）来改变元素的样式，从而实现动态的页面效果。通过修改元素的 CSS 属性，我们可以改变其外观、布局和动画等方面。
Shadow-DOM-inject-styles：轻松修改Shadow DOM CSS的辅助函数
02-06
轻松修改Shadow DOM CSS的辅助功能。 安装 npm install shadow-dom-inject-styles --save Vanilla JS示例/演示 < script type =" module " > import { injectStyles } from '...
通过DOM对象获取/修改CSS样式 & class
qq2071114140的博客
08-18 8199
文章目录通过DOM对象获取/修改CSS样式1.获取 & 修改内联样式2. 获取当前样式IE8及以下不支持，其它支持：`window.getComputedStyle(element)`仅IE浏览器支持：`element.currentStyle.XXX`封装一个通用的方法总结 通过DOM对象获取/修改CSS样式 1.获取 & 修改内联样式 对于一个元素结点来说，内联样式style就是元素结点的一个属性节点。 可以通过element.style.XXX来获取这个元素结点的内联样式；同时，也可以
dom修改css样式
qq_38409944的博客
02-08 2449
CSS-DOM: style属性是对象类型 nodeName是tring类型 如果文档的内容需要定期编辑和刷新 添加class属性的工作就会变成一种负担 如果文档内容需要一个CMS来处理 给文档内容的个别部分添加class属性或者其他样式的做法有时是不被允许的 font-size属性要用元素.style.fontSize来检索 考虑纯粹用css还是用DOM设置样式 需要考虑这些问题： 1最...
Js中的DOM改变HTML标签中的CSS样式
qq_44388958的博客
03-27 962
JavaScript中的DOM可以改变CSS样式。 下面来看一下代码 : 效果如下 : 如何用JavaScript中的DOM改变HTML标签中的CSS样式，script代码如下： 代码解释如下 : var inObj = document.getElementById("btn"); //通过id名称“btn”来获取元素,声明一个变量inObj来储存这...
DOM中的修改样式
Dimuzero的博客
12-03 974
DOM修改样式 通过修改html来实现修改元素样式的目的（间接修改） 1. 修改行内样式 通过修改html标签属性中的style来达到修改元素样式的目的 Element.style.display = 'none' Element.style.backgroundColor = 'red' Element.style.transform = 'translate(' + number+ 'px)' 注意： a.backgroundColor关于背景的写法，去掉-并且后面的后缀描述首字母大写 b.wid
JavaScript HTML DOM - 改变 HTML、CSS样式
guitarist0505的博客
04-08 756
1.直接在输出流中写入。 例如写入系统时间用Date()document.write(Date());2.修改指定元素内容document.getElementById("p1").innerHTML="New text!";3.改变html属性document.getElementById(id).属性名=new value;举个栗子：改变img的src&lt;!DOCTYPE html&gt;...
Web前端技术：利用Cookie、DOM与CSS实现动态换肤功能
页面换肤功能是现代Web应用中的常见功能，它允许用户根据个人喜好更改网站的...从最基础的HTML结构设置，到CSS样式的更改，再到JavaScript和DOM的操作，以及最后的cookie存储，每一步都需要开发者细心规划和精确编码。
ReactShadow：利用React中的Shadow DOM以及样式封装的所有好处
02-05
在React中利用Shadow DOM以及样式封装的所有好处。 npm ： npm i react-shadow 纱线： yarn add react-shadow Heroku ： : （） 入门 创建就像使用默认导出使用提供的节点名称来构造一样简单，例如root.div将创建...
dom-invaders:通过香草JS使用DOM操作（而不是Canvas或WebGL）创建的怀旧作品。 所有图形都是CSS生成的
04-10
这种结合使用DOM和CSS的方式，既保留了JavaScript的动态性，又充分利用了CSS的可视化优势。 此外，由于不依赖于Canvas或WebGL，"DOM Invaders"在兼容性和性能上可能面临挑战。DOM操作相比于直接绘制像素可能会导致...
DOM对CSS的操作
毕富国的博客
07-23 1329
DOM对CSS的操作 - 读取和修改内联样式 - 使用style属性来操作元素的内联样式 - 读取内联样式： 语法：元素.style.样式名 - 例子： 元素.style.width 元素.style.height - 注意：如果样式名中带有-，则需要将样式名修改为驼峰命名法 将-去掉，然后-后的字母改大写 - 比如：background-color --&gt; backgr...
【DOM】DOM操作之如何修改元素的样式_03
青春木鱼的博客
05-14 5965
DOM操作之如何修改元素的样式，无论修改内联样式还是修改样式表中的样式，都使用：元素.style.css属性名="属性值"来修改、另外，今后只要获得css属性值，都要获得计算后的样式：var style=getComputedStyle(元素对象) ，然后从style中获取对应的css属性值：style.css属性
Dom修改样式
qq_18344549的博客
08-11 543
dom修改css样式
DOM修改Css样式
dengfengling999的博客
01-18 1607
1.修改box1的宽度、高度、背景颜色 2.读取样式 读取样式表style的样式 语法：元素.currentStyle.样式名 它可以用来读取当前元素正在显示的样式（谁生效就获取谁的） 如果当前元素没有设置样式，则获取默认值 注意currentStyle只有IE浏览器支持，其他不支持 在其他浏览器可以使用：getComputerStyle（）这个方法获取元素当前的样式，不支持ie8以下浏览器 这个方法是windows的方法，需要2个参数： 第一个，要获取样式的元素 第二个,可以传递一
DOM中更改css样式以及DOM中常见的属性样式
超cccccccc的博客
08-14 1504
DOM样式 行内样式与css样式 var div0 = document.querySelector('#div0'); div0.style.height = '100px'; div0.style.width = '100px' 上面的对象写法，需要将所有的css中-字母替换为大写字母 例如 font-size fontSize 而style字符串方式写法，按照原css行内样式填写。 div0.style = 'width:100px';height:100px;background-color:
JS笔记 入门第四
weixin_30577801的博客
02-11 159
小测试:注意:取消所有的设定可以直接使用document.getElementById("txt").removeAttribute("style");这个是个神奇的东西.<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" Content="text/html; charset=utf-8"...
JavaScript HTML DOM - 改变CSS
最新发布
likuoelie的博客
06-15 1115
HTML DOM（文档对象模型）是HTML文档的编程接口，当浏览器加载网页时，会将HTML文档解析为一个DOM树。每个HTML元素、属性和文本都被表示为节点，JavaScript可以通过DOM API访问和修改这些节点，从而实现动态网页交互。例如，一个简单的HTML页面：</ p ></ p ></ p ></</ p >在DOM中表示为一个<p>元素节点，JavaScript可以使用DOM API来访问并修改它的样式。
DOM修改样式属性
m0_54007573的博客
03-11 689
DOM修改样式属性
通过DOM修改css的属性
xing_kai_kai的博客
07-13 701
通过JS修改元素的样式： 语法： 元素.style.样式名 = 样式值 注意： 如果CSS的样式名中含有-， 这种名称在JS中是不合法的比如background-color 需要将这种样式名修改为驼峰命名法， 去掉-，然后将-后的字母大写 我们通过style属性设置的样式都是内联样式， 而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示 但是如果在样式中写了!important，则此时样式会有最高的优先级， 即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效 所以尽量不要为样式添加!
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值