HTML 修改 css 属性问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 562 天前的主题，其中的信息可能已经有所发展或是发生改变。

不太熟悉 HTML 和 js ，查资料已知 jquery 或原生 js 可以"修改"css 属性，比如

$("#myId").attr("style", "background-color:red");
$("#myId").css("background-color", "red");

但这种所谓"修改"好像应称之为"覆盖"更贴切，因为这样操作后只是在当前 div 等标签新添加了 style ，并非改动原 style 属性值。请教有没有什么办法可以直接修改原 style 属性？比如

<html>
    <style>
        body{
            background-color:red
        }
    <style>
<body></body></html>

有没有什么办法修改原 style 的"red"值？？

20 条回复 • 2022-10-10 10:45:58 +08:00

nitmali

2022-10-09 08:51:27 +08:00

所以，到底是啥需求

hay313955795

2022-10-09 08:54:57 +08:00

黑猫白猫能抓到老鼠的都是好猫...不是这样的吗

HelloWorld556

2022-10-09 08:55:42 +08:00

能跑就行

lichao

2022-10-09 08:56:52 +08:00

document.getElementsByTagName('style')[0].innerHTML=`body {background-color: red}`;

qeqv

2022-10-09 08:57:24 +08:00

document.body.style.backgroundColor="green"

ljpCN

2022-10-09 09:16:22 +08:00

你应该是想在运行时修改 css 代码。不建议这样做。比较推荐的方式是写多个 css class ，在运行时切换元素的 class 。

faketemp

2022-10-09 09:21:10 +08:00

@lichao 正解，谢谢释疑

@qeqv 谢谢，不过经测这样操作也是在 body 标签新添加 css"覆盖"原 style 实际上原 style 中"background-color"的值并未修改

Kenmin

2022-10-09 09:55:13 +08:00

能做到（#4 正解），但不建议这样做，前端修改样式一般是通过 CSS 优先级顺序覆盖来实现。
可以参考下这篇文档 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity

jymsy

2022-10-09 09:55:32 +08:00

试试 css 变量吧

wdssmq

2022-10-09 10:04:58 +08:00

有 N 个房间，每个房间的墙面是不同颜色，你想换单一某个房间的颜色时只涂那个房间就好啊（刷一层白然后刷新颜色，实现方式就是覆盖）。而不是把全部房间重新涂一次吧。。还是把旧颜色铲掉重涂。

shintendo

2022-10-09 10:08:59 +08:00

你猜 CSS 为什么叫**层叠**样式表

HugoChao

2022-10-09 10:15:14 +08:00

#6 的方法更合适
另外不推荐在 js 里操纵 css ，因为都是在调用 document.style 方法来添加行内样式，会有权重问题

zhaol

2022-10-09 10:15:33 +08:00

是不是在写浏览器插件之类的外部工具啊，正常需求肯定不是这样做的。

Pastsong

2022-10-09 10:23:25 +08:00

修改 css 文本浏览器还要把整个 style block 的内容都重新 parse 一遍。。

libook

2022-10-09 10:26:18 +08:00

jQuery 或 document.querySelector 选中这个 style 元素，读取里面的 innerHTML ，然后 replace red 为其他字符串，再重新赋值给这个元素的 innerHTML 值，即可。

虽然可以这么做，但一般不这么做。CSS 的主流用法就是覆盖属性和切换 class ，这样在合理规划的情况下从 CSS 代码上就可以看到状态变化，直观、容易维护。修改代码的方式会使得你在读代码的时候不能直接了解到这块代码什么时候变成什么样子，维护大量代码的时候比较容易产生失误。

faketemp

2022-10-09 10:41:23 +08:00

谢谢大家讲解让我更深入的理解设计规范和良好习惯

不过如 @zhaol 所想我确实是在设计一款其他程序需调用交互 css 思来想去若采用新建 css 然后切换的方式操作显示效果有些卡顿不太流畅而经测直接修改原 style 显示效果很流畅所以……

Rache1

2022-10-09 19:49:56 +08:00

要贴题的话，老实说，楼上的方案都不太行，因为他们的方案都过于粗暴。

比如 #4 楼的方案，它本质上是直接重写了，也就是说，为了复写一个样式，却要把原来的全部重新粘贴过来。

而且，有时候 CSS 是在单独的 CSS 文件里面，并不在页面上。

#5 楼的方案和楼主原文说的并无不同

这个问题可以使用 js 的 document.styleSheets 属性来做到。

比如我现在想要修改 OP 这个 badge 的样式，就需要先找到其在哪个 CSS 样式表，然后再找到具体的规则，然后设置他的样式。

[...[...document.styleSheets].find(v=>([...v.rules].find(v=>v.selectorText === '.badge.op'))).cssRules].find(v=>v.selectorText === '.badge.op').style.color = '#ff00ff'

Rache1

2022-10-09 19:52:59 +08:00

@Rache1 当然，实际操作中，并不建议这样，而是更加建议使用 #6 楼的方案，为其添加 class 来解决。

当然，如果这个网页的样式代码是你写的，并且你只需要动态修改一下属性的值，那还更加推荐另一种方式：CSS 变量。

如果更复杂的，就是 #6 楼的方案了

faketemp

2022-10-09 23:28:30 +08:00 via iPhone

@Rache1 谢谢大佬指正用 css 变量确实比直接替换 css 内容来的更加优雅且简洁学习了

faketemp

2022-10-10 10:45:58 +08:00

应注意 css 变量也可能存在兼容性问题和小坑可以看这里
https://www.zhangxinxu.com/wordpress/2016/11/css-css3-variables-var/