devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

CSS中变量的作用_document.documentelement.style.setproperty

作者：繁依Fanyi0 | 2024-02-15 13:09:22

赞

踩

document.documentelement.style.setproperty

CSS中变量的作用

CSS中的变量用于存放属性值，可统一修改样式，不需要再手动更改大量的属性值。

CSS变量需要用到两个方法 : root 和 var() 。

:root 是指文档的根元素，在其中定义的变量可作为 全局变量，例如：

  1. :root{
  2.     /* 变量名：变量值 */
  3.     --col: #393939;
  4. }

var() 函数用于使用CSS变量，例如：

  1. body {
  2.     height: 500px;
  3.     /* 属性：var(变量名) */
  4.     background-color: var(--col);
  5. }

注意：CSS变量严格区分大小写，变量名前需要有 -- 符号，例如：--col 。

JavaScript修改CSS变量

  1. // document.documentElement.style.setProperty("变量名","变量值");
  2. document.documentElement.style.setProperty("--back","#FFFFFF");
  •  document.documentElement 属性可返回文档的根节点。
  •  setProperty() 方法用于设置CSS变量。

CSS变量使用代码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>CSS变量使用</title>
  6.         <style type="text/css">
  7.             *{
  8.                 margin: 0;
  9.                 padding: 0;
  10.                 box-sizing: border-box;
  11.             }
  12.             :root{
  13.                 --back: #393939;
  14.                 --col: pink;
  15.                 --sizes: 300px;
  16.             }
  17.             body{
  18.                 height: 100vh;
  19.                 background-color: var(--back);
  20.                 display: flex;
  21.                 justify-content: center;
  22.                 align-items: center;
  23.             }
  24.             #box{
  25.                 width: var(--sizes);
  26.                 height: var(--sizes);
  27.                 background-color: var(--col);
  28.             }
  29.             #box p{
  30.                 text-align: center;
  31.                 line-height: var(--sizes);
  32.                 font-size: 30px;
  33.                 color: var(--back);
  34.             }
  35.         </style>
  36.     </head>
  37.     <body>
  38.         
  39.         <div id="box">
  40.             <p onclick="cut()">点击切换</p>
  41.         </div>
  42.         
  43.         <script type="text/javascript">
  44.             
  45.             function cut(){
  46.                 document.documentElement.style.setProperty("--back","#FFFFFF");
  47.                 document.documentElement.style.setProperty("--col","aqua");
  48.                 document.documentElement.style.setProperty("--sizes","200px");
  49.             }
  50.             
  51.         </script>
  52.         
  53.     </body>
  54. </html>

CSS变量使用效果

点击前：

 点击后：

原文作者：吴小糖 

创作时间：2022-8-22

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/article/detail/84736
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号