16赞

从javascript访问CSS变量

作者：Life一切安好 | 2023-09-06 22:58

如何解决《从javascript访问CSS变量》经验，为你挑选了2个好方法。

有没有办法从javascript访问css变量？这是我的css变量声明.

:root {
  --color-font-general: #336699;
}


    
  




  
  
  

    

      

        Oriol..
         105
      
      
只是标准方式:


获取计算的样式 getComputedStyle
使用getPropertyValue以获得所需的属性的值


getComputedStyle(element).getPropertyValue('--color-font-general');


例:



var style = getComputedStyle(document.body);
console.log(style.getPropertyValue('--color-font-general'));

:root { --color-font-general: #336699; }





1> Oriol..：
只是标准方式:


获取计算的样式 getComputedStyle
使用getPropertyValue以获得所需的属性的值


getComputedStyle(element).getPropertyValue('--color-font-general');


例:



var style = getComputedStyle(document.body);
console.log(style.getPropertyValue('--color-font-general'));

:root { --color-font-general: #336699; }



2> Louay Alakka..：
用这个:

window.getComputedStyle(document.documentElement).getPropertyValue('--color-font-general');


你可以像这样改变它:

document.documentElement.style.setProperty('--color-font-general', '#000');


资源

        
您也可以像这样获得它：`element.style.getPropertyValue（）` 
它实际上是`document.documentElement.style.setProperty(' -  color-font-general','#000');`如果你想改变它.



    

    

    
        推荐阅读
        
            
                                
                    
                        程序员
                        选择兄弟的文本
                    

                    
                                                
                        如何解决《选择兄弟的文本》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        Spring Security:如何将重定向查询参数添加到登录URL以允许页面加书签？
                    

                    
                                                
                        如何解决《SpringSecurity:如何将重定向查询参数添加到登录URL以允许页面加书签？》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        GStreamer  - 从Raspberry到VLC-PC的网络摄像头流
                    

                    
                                                
                        如何解决《GStreamer-从Raspberry到VLC-PC的网络摄像头流》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        c ++支持模板元编程中的最后一次调用优化
                    

                    
                                                
                        如何解决《c++支持模板元编程中的最后一次调用优化》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        一个ACE编辑器的瘦包装器,用于制作React组件
                    

                    
                                                
                        如何解决《一个ACE编辑器的瘦包装器,用于制作React组件》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        用PyBrain神经网络预测时间序列数据
                    

                    
                                                
                        如何解决《用PyBrain神经网络预测时间序列数据》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        CSS覆盖规则
                    

                    
                                                
                        如何解决《CSS覆盖规则》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        using语句外的SQL Connection构造函数
                    

                    
                                                
                        如何解决《using语句外的SQLConnection构造函数》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        在MATLAB中反表制函数
                    

                    
                                                
                        如何解决《在MATLAB中反表制函数》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        MQTT:每分钟MQTT客户端轮询服务器多少次？
                    

                    
                                                
                        如何解决《MQTT:每分钟MQTT客户端轮询服务器多少次？》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        如何在Angular 2中将对象从一个组件传递到另一个组件？
                    

                    
                                                
                        如何解决《如何在Angular2中将对象从一个组件传递到另一个组件？》经验，为你挑选了3个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        如何在Xamarin.Android上处理三倍（或配置的数字）轻击手势？
                    

                    
                                                
                        如何解决《如何在Xamarin.Android上处理三倍（或配置的数字）轻击手势？》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        从控制器触发模态弹出窗口
                    

                    
                                                
                        如何解决《从控制器触发模态弹出窗口》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        表之间的多对多关系 - 如何在SQL中建模
                    

                    
                                                
                        如何解决《表之间的多对多关系-如何在SQL中建模》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        升级到php-7后"调用未定义的函数mysql_connect()"
                    

                    
                                                
                        如何解决《升级到php-7后"调用未定义的函数mysql_connect()"》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        将现有Watchkit应用程序更新为WatchOS2
                    

                    
                                                
                        如何解决《将现有Watchkit应用程序更新为WatchOS2》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        SQL Server外键,引用表
                    

                    
                                                
                        如何解决《SQLServer外键,引用表》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        Android:布局动画,如Inshorts新闻应用
                    

                    
                                                
                        如何解决《Android:布局动画,如Inshorts新闻应用》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        单击使用react-native时如何更改图像和文本颜色？
                    

                    
                                                
                        如何解决《单击使用react-native时如何更改图像和文本颜色？》经验，为你挑选了3个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        如何在android中删除Recyclerview项目之间的分隔符
                    

                    
                                                
                            
                        
                                                
                        如何解决《如何在android中删除Recyclerview项目之间的分隔符》经验，为你挑选了2个好方法。 ...
                        [详细]
                    
                    

                


                

            
        
    

    
        吐了个 "CAO" !
        
            
                吐个槽吧,看都看了
            
            
                
                                        会员登录 | 用户注册
























    

    
        
            
            
                
                    
                
            

            
                Life一切安好            

            
                这个屌丝很懒，什么也没留下！            
            
            

                                
                    
                    关注作者
                            

        
    


    
        Tags | 热门标签
        
            
                                
                    actionscrip
                
                                
                    bash
                
                                
                    c#
                
                                
                    c++
                
                                
                    c语言
                
                                
                    erlang
                
                                
                    flutter
                
                                
                    go
                
                                
                    golang
                
                                
                    java
                
                                
                    javascript
                
                                
                    lua
                
                                
                    node.js
                
                                
                    perl
                
                                
                    php
                
                                
                    python
                
                                
                    scala
                
                                
                    typescript
                
                                
            
        
    


    
        RankList | 热门文章
        
            
                                
                    1有没有办法让Delphi VCL表格大小而不改变BorderStyle？
                
                                
                    2RxJava：观察套接字发出的消息
                
                                
                    3SBT目录结构.什么是"项目"？
                
                                
                    4谷歌地图有角度
                
                                
                    5了解R中的P值-轻松
                
                                
                    6Dagger不喜欢抛出异常的构造函数
                
                                
                    7如何在R包中定义"隐藏的全局变量"？
                
                                
                    8无法获得app.local到路由文件
                
                                
                    9解释SML函数及其类型
                
                                
                    10IntelliJ IDEA TypeScript/Webpack调试仅适用于JavaScript断点
                
                                
                    11将元素添加到列表的代码变体之间的差异
                
                                
                    12结合Theano中的标量和矢量来计算Hessian
                
                                
                    13用渐变替换饼图颜色
                
                                
                    14问号'？' 在锚链接
                
                                
                    15为什么要使用uWSGI max-requests选项？
                
                                
                    16可重复使用的redux存储数据计算的最佳实践
                
                                
                    17名称和存在的functor或monad链接和终止操作序列
                
                                
                    18在Scheme或STk中,函数将显示为过程或闭包,但为什么LISP会出错？
                
                                
                    19Seaborn Pairplot Pearsons P统计
                
                                
                    20为什么这是这个程序的输出？