提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

【css高级】变量详解

变量CSS 详解 高级
2023-09-27 14:28:32 时间

❤️文章内包含个人理解，如有错误请指出。 ❤️

  往期文章

轮播图swiper框架的基本使用
【Transform3D】转换详解（看完就会）
【css动画】移动的小车

【CSS3】 float浮动与position定位常见问题（个人笔记）

如何完成响应式布局，有几种方法？看这个就够了

详解 CSS3中最好用的布局方式——flex弹性布局（看完就会）

[前端CSS高频面试题]如何画0.5px的边框线（详解）
CSS3基础属性大全
CSS3动画属性 animation详解（看完就会）
CSS3 transform 2D转换之移动 旋转 缩放（详细讲解看完就会）
CSS3 Z—Index 详解
CSS3 positon定位详解（通俗易懂）

目录

前言

定义变量

使用变量

特别注意点

                字符连接

                无单位计算，并添加单位。           

                变量js互通

前言

使用 CSS 变量方便设计颜色等属性。您可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同的颜色。

定义变量

变量分为全局变量和局部变量。

全局变量可以在整个文档中进行访问/使用，而局部变量只能在声明它的选择器内部(本身和子级)使用。

    <style>
        /* 定义全局变量 */
        :root {
            --color: red;
        }

        /* 定义局部变量 */
        .main {
            --color: blue;
        }
    </style>
</head>

<body>
    <div class="main">
        dsfsds
    </div>
</body>

 在:root内定义全局变量，变量定义格式为 --变量名，需要以--两个短杠开头，

使用变量

var() 函数用于插入 CSS 变量的值。

    <style>
        /* 定义全局变量 */
        :root {
            --color: red;
        }

        /* 定义局部变量 */
        .main {
            --color: blue;
            color: var(--color);
        }
    </style>
</head>

<body>
    <div class="main">
        dsfsds
    </div>
</body>

特别注意点

                字符连接

                        

 <style>
        /* 定义全局变量 */
        :root {
            --color: red;
            /* 字符变量 */
            --a: 'sad';
            --b: 'dgr';
        }

        /* 定义局部变量 */
        .main::before {
            /* 连接字符 */
            content: var(--a)var(--b);
            --color: blue;
            color: var(--color);
        }
    </style>
</head>

<body>
    <div class="main">
    </div>
</body>

 

                无单位计算，并添加单位。

                        

    <style>
        /* 定义全局变量 */
        :root {
            --color: red;
            /* 字符变量 */
            --a: 'sad';
            --b: 'dgr';
            --size: 25;
        }

        /* 定义局部变量 */
        .main::before {
            /* 连接字符 */
            content: var(--a)var(--b);
            --color: blue;
            color: var(--color);
            /* 不可以直接连接px，必须双方是字符串。
            需要cale计算函数才可以 */
            font-size: calc(var(--size)*1px);
        }
    </style>
</head>

<body>
    <div class="main">
    </div>
</body>

               

                变量js互通

                        CSS 变量可以访问 DOM，这意味着您可以创建具有局部或全局范围的变量，使用 JavaScript 来修改变量，以及基于媒体查询来修改变量。

                        

<style>
        /* 变量的定义  --变量名  */
        /* root 全局作用域 谁都可以使用
        在其他类名id下定义只有自己和子级能使用*/
        :root {
            --color: pink;
            --fs: 50;
        }
    </style>
    <script>
        //与js的关系
        window.onload = function () {
            var root = document.querySelector(':root');
            var styles = getComputedStyle(root);
            var fonts = styles.getPropertyValue('--fs') - 1;
            console.log(fonts);
            root.style.setProperty('--fs', 20)
        }
    </script>
</head>

<body>
    <div class="main">
        asd
    </div>
</body>

 可以在js中使用css变量，获取值和修改。

相关文章