js 如何实现动态修改 class 样式类中的值,不是不能修改的吗?

2022-01-21 10:38:36 +08:00
 Gaays

最近在研究宜搭的实现方式,看到修改容器 display 时会直接修改 class 内的值,这是怎么做到的? 修改右侧任意配置项后 class 内的值就会跟着变化

2122 次点击
所在节点    JavaScript
12 条回复
Kasumi20
2022-01-21 10:42:35 +08:00
可以直接替换<style>标签的内容
xiaojun1994
2022-01-21 10:45:35 +08:00
可以好像通过 js 直接修改 css text 内容,具体我忘了
Gaays
2022-01-21 10:47:48 +08:00
@Kasumi20 他这个 class 是动态生成的,每个拖拽组件的 class 都不一样,直接替换 style ? style 内容也得是动态生成的吧,不知道咋处理
mxT52CRuqR6o5
2022-01-21 11:31:17 +08:00
gadfly3173
2022-01-21 11:37:17 +08:00
从 css 来看是阿里自己搞了个模拟器的组件,整个左边都是 shadow dom
gadfly3173
2022-01-21 11:38:58 +08:00
每个 node 都是单独一个 style ,有单独的 id ,应该就是根据这个 id 去替换 style
yuzo555
2022-01-21 11:43:26 +08:00
DOM 操作就可以直接添加新的 <style> 元素并且会生效,然后修改目标元素的 id 即可。
gadfly3173
2022-01-21 11:46:32 +08:00
@yuzo555 #7 宜搭这个 css class id 是固定的,所以他是直接替换了指定 id 的 style 标签
hurrytospring
2022-01-21 13:04:57 +08:00
css in js?
3dwelcome
2022-01-21 13:16:26 +08:00
我有个 WEB 项目也用这种模式。

正常来说,应该是用 js 语句来设置 element 的 style 。但我用的是 tailwindcss 语法,把 bg-red-200 实时翻译后,就变成了 background-color:#red

不好用 style.backgroundColor = 'red';

就只能用这种奇怪的模式来动态修改 CSS 。
AyaseEri
2022-01-21 15:22:55 +08:00
const style = document.createElement("style");
style.innerHTML = `.css_pseudo_node_${id} { display: ${display} }`

最 low 的方法也不是不行
Gaays
2022-01-21 17:36:19 +08:00
@gadfly3173 @yuzo555 @gadfly3173 正解,没想到用这种方式,有点秀

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

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

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

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

© 2021 V2EX