最近在研究宜搭的实现方式，看到修改容器 display 时会直接修改 class 内的值，这是怎么做到的？
修改右侧任意配置项后 class 内的值就会跟着变化
推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
This topic created in 1757 days ago, the information mentioned may be changed or developed.
 |
Kasumi20Jan 21, 2022
1
可以直接替换<style>标签的内容
|
 |
xiaojun1994Jan 21, 2022
2
可以好像通过 js 直接修改 css text 内容，具体我忘了
|
 |
3
@Kasumi20 他这个 class 是动态生成的，每个拖拽组件的 class 都不一样，直接替换 style ？ style 内容也得是动态生成的吧，不知道咋处理
|
 |
mxT52CRuqR6o5Jan 21, 2022
4
|
 |
gadfly3173Jan 21, 2022
5
从 css 来看是阿里自己搞了个模拟器的组件，整个左边都是 shadow dom
|
|
6
 每个 node 都是单独一个 style ，有单独的 id ，应该就是根据这个 id 去替换 style |
1 |
yuzo555Jan 21, 2022
7
DOM 操作就可以直接添加新的 <style> 元素并且会生效，然后修改目标元素的 id 即可。
|
|
gadfly3173Jan 21, 2022
8
@yuzo555 #7 宜搭这个 css class id 是固定的，所以他是直接替换了指定 id 的 style 标签
|
 |
hurrytospringJan 21, 2022
9
css in js?
|
 |
3dwelcomeJan 21, 2022
10
我有个 WEB 项目也用这种模式。
正常来说，应该是用 js 语句来设置 element 的 style 。但我用的是 tailwindcss 语法，把 bg-red-200 实时翻译后，就变成了 background-color:#red 不好用 style.backgroundColor = 'red'; 就只能用这种奇怪的模式来动态修改 CSS 。 |
 |
AyaseEriJan 21, 2022
11
const style = document.createElement("style");
style.innerHTML = `.css_pseudo_node_${id} { display: ${display} }` 最 low 的方法也不是不行 |
|
12
|
Select Language