这是一个创建于 810 天前的主题，其中的信息可能已经有所发展或是发生改变。
不太熟悉 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"值？？
 |
1
nitmali 2022-10-09 08:51:27 +08:00
所以，到底是啥需求
|
 |
2
hay313955795 2022-10-09 08:54:57 +08:00
黑猫白猫 能抓到老鼠的都是好猫...不是这样的吗
|
 |
3
HelloWorld556 2022-10-09 08:55:42 +08:00
能跑就行
|
 |
4
lichao 2022-10-09 08:56:52 +08:00  1
document.getElementsByTagName('style')[0].innerHTML=`body {background-color: red}`;
|
 |
5
qeqv 2022-10-09 08:57:24 +08:00 1
document.body.style.backgroundColor="green"
|
 |
6
ljpCN 2022-10-09 09:16:22 +08:00 2
你应该是想在运行时修改 css 代码。不建议这样做。比较推荐的方式是写多个 css class ，在运行时切换元素的 class 。
|
 |
7
faketemp OP |
 |
8
Kenmin 2022-10-09 09:55:13 +08:00 2
能做到（#4 正解），但不建议这样做，前端修改样式一般是通过 CSS 优先级顺序覆盖来实现。
可以参考下这篇文档 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity |
 |
9
jymsy 2022-10-09 09:55:32 +08:00
试试 css 变量吧
|
 |
10
wdssmq 2022-10-09 10:04:58 +08:00
有 N 个房间，每个房间的墙面是不同颜色，你想换单一某个房间的颜色时只涂那个房间就好啊（刷一层白然后刷新颜色，实现方式就是覆盖）。而不是把全部房间重新涂一次吧。。还是把旧颜色铲掉重涂。
|
 |
11
shintendo 2022-10-09 10:08:59 +08:00 2
你猜 CSS 为什么叫**层叠**样式表
|
 |
12
HugoChao 2022-10-09 10:15:14 +08:00
#6 的方法更合适
另外不推荐在 js 里操纵 css ，因为都是在调用 document.style 方法来添加行内样式，会有权重问题 |
 |
13
zhaol 2022-10-09 10:15:33 +08:00 1
是不是在写浏览器插件之类的外部工具啊，正常需求肯定不是这样做的。
|
 |
14
Pastsong 2022-10-09 10:23:25 +08:00
修改 css 文本浏览器还要把整个 style block 的内容都重新 parse 一遍。。
|
 |
15
libook 2022-10-09 10:26:18 +08:00 1
jQuery 或 document.querySelector 选中这个 style 元素，读取里面的 innerHTML ，然后 replace red 为其他字符串，再重新赋值给这个元素的 innerHTML 值，即可。
虽然可以这么做，但一般不这么做。CSS 的主流用法就是覆盖属性和切换 class ，这样在合理规划的情况下从 CSS 代码上就可以看到状态变化，直观、容易维护。修改代码的方式会使得你在读代码的时候不能直接了解到这块代码什么时候变成什么样子，维护大量代码的时候比较容易产生失误。 |
|
16
faketemp OP 谢谢大家讲解让我更深入的理解设计规范和良好习惯
不过如 @zhaol 所想 我确实是在设计一款其他程序需调用交互 css 思来想去若采用新建 css 然后切换的方式操作 显示效果有些卡顿不太流畅 而经测直接修改原 style 显示效果很流畅 所以…… |
 |
17
Rache1 2022-10-09 19:49:56 +08:00 1
要贴题的话，老实说，楼上的方案都不太行，因为他们的方案都过于粗暴。
比如 #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'  |
|
18
Rache1 2022-10-09 19:52:59 +08:00 1
@Rache1 当然，实际操作中，并不建议这样，而是更加建议使用 #6 楼的方案，为其添加 class 来解决。
当然，如果这个网页的样式代码是你写的，并且你只需要动态修改一下属性的值，那还更加推荐另一种方式：CSS 变量。 如果更复杂的，就是 #6 楼的方案了 |
|
19
faketemp OP @Rache1 谢谢大佬指正 用 css 变量确实比直接替换 css 内容来的更加优雅且简洁 学习了
|
|
20
faketemp OP 应注意 css 变量也可能存在兼容性问题和小坑 可以看这里
https://www.zhangxinxu.com/wordpress/2016/11/css-css3-variables-var/ |
Select Language