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

[Gaays]

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

[Kasumi20]

可以直接替换<style>标签的内容

[xiaojun1994]

可以好像通过 js 直接修改 css text 内容，具体我忘了

[Gaays]

@Kasumi20 他这个 class 是动态生成的，每个拖拽组件的 class 都不一样，直接替换 style ？ style 内容也得是动态生成的吧，不知道咋处理

[mxT52CRuqR6o5]

https://developer.mozilla.org/zh-CN/docs/Web/API/CSSStyleSheet/insertRule

[gadfly3173]

从 css 来看是阿里自己搞了个模拟器的组件，整个左边都是 shadow dom

[gadfly3173]

每个 node 都是单独一个 style ，有单独的 id ，应该就是根据这个 id 去替换 style

[yuzo555]

DOM 操作就可以直接添加新的 <style> 元素并且会生效，然后修改目标元素的 id 即可。

[gadfly3173]

@yuzo555 #7 宜搭这个 css class id 是固定的，所以他是直接替换了指定 id 的 style 标签

[hurrytospring]

css in js?

[3dwelcome]

我有个 WEB 项目也用这种模式。

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

不好用 style.backgroundColor = 'red';

就只能用这种奇怪的模式来动态修改 CSS 。

[AyaseEri]

const style = document.createElement("style");
style.innerHTML = `.css_pseudo_node_${id} { display: ${display} }`

最 low 的方法也不是不行

[Gaays]

@gadfly3173 @yuzo555 @gadfly3173 正解，没想到用这种方式，有点秀