• css自定义属性

    ​前期回顾    ​       

    你把 css：hover 玩明白_0.活在风浪里的博客-CSDN博客你想要什么hover效果？你想要什么动画？十万行不同动画效果，可单独复制出来几行使用，极简轻量，css奇淫技巧还在等待什么，99+种功能，总能满足你的要求，快来一键三连抱走吧https://blog.csdn.net/m0_57904695/article/details/126309518?spm=1001.2014.3001.5501 比如你写一个网站大量用到相同的颜色，就可以使用css自定义属性

    --正式开始

      /*

            Tip： 变量的名称可以用数字、汉字等，不能包含$，[，^，(，%**等字符，变量的值也是可以使用各种属性值：

           :root相当于html根元素，可以用来设置根元素的属性，如：:root{--color:red;}

               定义语法： --自定义样式名:值;

               使用语法: 样式属性名称:var(--变量名);

        */

    1： 基本例子

    1.  
    2. <style>
    3.  
    4.     :root {
    5.      /*全局样式可复用*/
    6.         --红色背景: #ff0000;
    7.         --39: rgb(39, 214, 16);
    8.         --pd: 10px 20px;
    9.         --height: 200px;
    10.     }
    11.  
    12.     .box {
    13.         width: 100px;
    14.         background: var(--红色背景);
    15.         height: var(--height);
    16.         color: var(--39);
    17.         padding: var(--pd);
    18.     }
    19.  
    20.     .box1 {
    21.         width: 100px;
    22.         height: var(--height);
    23.         padding: var(--pd);
    24.          /*可复用*/
    25.         background: var(--红色背景);     
    26.         margin: 10px;
    27.     }
    28. style>
    29.  
    30. <body>
    31.     <div class="box">红色div>
    32.     <div class="box1">1div>
    33.  
    34. body>

    2： var（）第二个参数

     

    你使用的自定义属性没定义，所以控制台没有背景色，

    此时你可以借助var第二个参数，

    如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。

     

    3：JavaScript获取css变量 

    第一种 

    1.  
    3.  
    4. <body>
    5.     <div class="box">666div>
    6.  
    7. body>
    8. <script>
    9.     let b = document.querySelector('.box');
    10.     b.style.backgroundColor = 'green';
    11. script>

    第二种 

    1.  
    2. <head>
    3.     <meta charset="utf-8">
    4.     <title>title>
    5.     <style type="text/css">
    6.         /* 在这里定义变量 */
    7.         :root {
    8.             --var-primary-color: red;
    9.             --var-cyan-color: blue;
    10.         }
    11.  
    12.         .box {
    13.             width: 200px;
    14.             height: 200px;
    15.             /* 通过 var(变量名) 引入变量即红色 */
    16.             background: var(--var-primary-color);
    17.         }
    18.     style>
    19. head>
    20.  
    21. <body>
    22.     <div class="box">div>
    23.     <button onclick="onChange()">改变颜色button>
    24.     <script type="text/javascript">
    25.         // 改变颜色
    26.         function onChange()
    27.         {
    28.             // 通过 setProperty 函数将其 --var-primary-color 变量更改为绿色
    29.             // document.documentElement.style.setProperty('--var-primary-color', 'green')
    30.             // 你也可以用 var(--var-cyan-color) 的方式传递进去，它会自动转成对应的 blue
    31.              document.documentElement.style.setProperty('--var-primary-color', 'var(--var-cyan-color)')
    32.         }
    33.     script>
    34. body>

  • 相关阅读:
    fiddler提示the system proxy was changed,Click to reanable capturing.导致无法抓包
    Git用法
    【Python刷题篇】Python从0到入门4|字典复习、函数入门、综合实践
    基于C#开发web网页管理系统模板流程-主界面密码维护功能完善
    API 与 SDK
    在Sora引爆视频生成时，Meta开始用Agent自动剪视频了
    Linux入门（三）
    IDEA导入Maven模块未识别，包颜色不对（包显示灰色）
    剑指Offer 05.替换空格
    mysql数据库基础
  • 原文地址：https://blog.csdn.net/m0_57904695/article/details/126351923