V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
Gaays
V2EX  ›  JavaScript

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

  •  
  •   Gaays · 2022-01-21 10:38:36 +08:00 · 2103 次点击
    这是一个创建于 1039 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    12 条回复    2022-01-21 17:36:19 +08:00
    Kasumi20
        1
    Kasumi20  
       2022-01-21 10:42:35 +08:00
    可以直接替换<style>标签的内容
    xiaojun1994
        2
    xiaojun1994  
       2022-01-21 10:45:35 +08:00
    可以好像通过 js 直接修改 css text 内容,具体我忘了
    Gaays
        3
    Gaays  
    OP
       2022-01-21 10:47:48 +08:00
    @Kasumi20 他这个 class 是动态生成的,每个拖拽组件的 class 都不一样,直接替换 style ? style 内容也得是动态生成的吧,不知道咋处理
    gadfly3173
        5
    gadfly3173  
       2022-01-21 11:37:17 +08:00
    从 css 来看是阿里自己搞了个模拟器的组件,整个左边都是 shadow dom
    gadfly3173
        6
    gadfly3173  
       2022-01-21 11:38:58 +08:00   ❤️ 1
    每个 node 都是单独一个 style ,有单独的 id ,应该就是根据这个 id 去替换 style
    yuzo555
        7
    yuzo555  
       2022-01-21 11:43:26 +08:00
    DOM 操作就可以直接添加新的 <style> 元素并且会生效,然后修改目标元素的 id 即可。
    gadfly3173
        8
    gadfly3173  
       2022-01-21 11:46:32 +08:00
    @yuzo555 #7 宜搭这个 css class id 是固定的,所以他是直接替换了指定 id 的 style 标签
    hurrytospring
        9
    hurrytospring  
       2022-01-21 13:04:57 +08:00
    css in js?
    3dwelcome
        10
    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
        11
    AyaseEri  
       2022-01-21 15:22:55 +08:00
    const style = document.createElement("style");
    style.innerHTML = `.css_pseudo_node_${id} { display: ${display} }`

    最 low 的方法也不是不行
    Gaays
        12
    Gaays  
    OP
       2022-01-21 17:36:19 +08:00
    @gadfly3173 @yuzo555 @gadfly3173 正解,没想到用这种方式,有点秀
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1132 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 22:57 · PVG 06:57 · LAX 14:57 · JFK 17:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.