HTML 修改 css 属性问题

2022-10-09 08:48:37 +08:00
 faketemp

不太熟悉 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"值？？

1688 次点击
所在节点    问与答
20 条回复
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
@Rache1 谢谢大佬指正 用 css 变量确实比直接替换 css 内容来的更加优雅且简洁 学习了
faketemp
2022-10-10 10:45:58 +08:00
应注意 css 变量也可能存在兼容性问题和小坑 可以看这里
https://www.zhangxinxu.com/wordpress/2016/11/css-css3-variables-var/

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/885418

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX