问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

js 如何操作 css 变量？

头像
_XYZ111
    492254176
    头像
    ShirleyYD
    3671542
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css"
            href="http://localhost:8000/library/bootstrap/5.1.3/css/bootstrap.min.css" />
    </head>
    <body>
        <style type="text/css">
            :root {
                --default-bg-color: #E6E6FA;
                --default-color: #DC143C;
            }

            html,
            body {
                color: var(--default-color);
                background-color: var(--default-bg-color);
            }

            #p1 {
                font-size: 35px;
            }
        </style>

        <main>
            <p id="p1">
                TEXTTEXTTEXTTEXTTEXT
            </p>
            <button type="button" class="btn btn-primary">变色</button>
        </main>

        <script type="text/javascript">

        </script>
    </body>
</html>

    image.png

    有没有办法通过js来改变变量--default-color的值
    本来是想实现一个主题切换开关的功能...

    javascriptjquerycss
    阅读 3.6k
    2 个回答
    得票最新
    头像
    唯一丶
      23.1k103743
      ✓ 已被采纳
      document.querySelector(':root').style.setProperty('--default-bg-color', 'red')

      document.querySelector(':root') 可以替换成 document.querySelector('html')

      头像
      半截短袖
        3418

        可以通过以下方法获取到css变量的值，至于后续你想怎么用这个值就很随意了。

        document.querySelector('.btn').onclick = function () {
   const allStyle = getComputedStyle(document.documentElement)
   // 拿到变量的值
   const val = String(allStyle.getPropertyValue('--default-color')).trim()
   console.log(val) // #DC143C
}
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题