设置框架的色调根据后端返回的数据更改

使用CSS变量的方法

使用 — 声明变量，使用 var() 函数获取变量。

变量名大小写敏感
因为声明变量是和CSS的使用方法一样，CSS能在哪里定义声明变量就可以在哪里定义。分为三种：行内样式、内部样式表、外部样式表

  1.     <style>
  2.         // 初始化定义变量
  3.         // :root是伪元素
  4.         :root {
  5.             --primary-color: #cbac6c; /*主题色*/
  6.             --auxiliary-color: #0077DA; /*主题辅助色*/
  7.             --info-color: #2db7f5; /*情景色-一般信息*/
  8.             --success-color: #00a436; /*情景色-成功*/
  9.             --warn-color: #ffb400; /*情景色-警告*/
  10.             --error-color: #f60151; /*情景色-错误*/
  11.             --light-color: #f0e3cb; /*情景色-浅色*/
  12.             --gradient-color-start: #986815; /*渐变色-起点*/
  13.             --gradient-color-end: #caa561; /*渐变色-终点*/
  14.             --dialog-head-color: #f7b6b6; /*对话框头部背景色*/
  15.         }
  16.     </style>
  18. // 使用CSS变量，var() 函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
  19. color: var(--color, #fff);
  21. // var()函数还可以用在变量的声明。
  22. :root {
  23.   --primary-color: red;
  24.   --logo-text: var(--primary-color);
  25. }
  27. // 注意，变量值只能用作属性值，不能用作属性名。
  28. .foo {
  29.   --side: margin-top;
  30.   /* 无效 */
  31.   var(--side): 20px;
  32. }
  33. 上面代码中，变量--side用作属性名，这是无效的。

CSS变量值的类型

如果变量值是一个字符串，可以与其他字符串拼接。

  1. --bar: 'hello';
  2. --foo: var(--bar)' world';

利用这一点，可以 debug

  1. body:after {
  2.   content: '--screen-category : 'var(--screen-category);
  3. }

如果变量值是数值，不能与数值单位直接连用。

  1. .foo {
  2.   --gap: 20;
  3.   /* 无效 */
  4.   margin-top: var(--gap)px;
  5. }

上面代码中，数值与单位直接写在一起，这是无效的。必须使用calc()函数，将它们连接。

  1. .foo {
  2.   --gap: 20;
  3.   margin-top: calc(var(--gap) * 1px);
  4. }

如果变量值带有单位，就不能写成字符串。

  1. /* 无效 */
  2. .foo {
  3.   --foo: '20px';
  4.   font-size: var(--foo);
  5. }
  7. /* 有效 */
  8. .foo {
  9.   --foo: 20px;
  10.   font-size: var(--foo);
  11. }

CSS变量作用域

同一个 CSS 变量，可以在多个选择器内声明.读取的时候，优先级最高的声明生效.
所在选择器优先级高的变量声明会覆盖优先级低的。—就近原则:。这与 CSS 的”层叠”（cascade）规则是一致的。

变量的作用域就是它所在的选择器的有效范围。
全局的变量通常放在根元素:root里面，确保任何选择器都可以读取它们。

  1. body {
  2.     --color: red;
  3. }
  5. p {
  6.     --color: black;
  7. }
  9. <p>显示为黑色</p>

响应式布局

CSS 是动态的，页面的任何变化，都会导致采用的规则变化。

利用这个特点，可以在响应式布局的media命令里面声明变量，使得不同的屏幕宽度有不同的变量值。

  1. body {
  2.   --primary: #7F583F;
  3.   --secondary: #F7EFD2;
  4. }
  6. a {
  7.   color: var(--primary);
  8.   text-decoration-color: var(--secondary);
  9. }
  11. @media screen and (min-width: 768px) {
  12.   body {
  13.     --primary:  #F7EFD2;
  14.     --secondary: #7F583F;
  15.   }
  16. }

兼容性处理

对于不支持 CSS 变量的浏览器，可以采用下面的写法。

  1. a {
  2.   color: #7F583F;
  3.   color: var(--primary);
  4. }

也可以使用@support命令进行检测。

  1. @supports ( (--a: 0)) {
  2.   /* supported */
  3. }
  5. @supports ( not (--a: 0)) {
  6.   /* not supported */
  7. }

JavaScript 检测浏览器是否支持 CSS 变量

JavaScript 检测浏览器是否支持 CSS 变量：

  1. const isSupported =
  2.   window.CSS &&
  3.   window.CSS.supports &&
  4.   window.CSS.supports('--a', 0);
  6. if (isSupported) {
  7.   /* supported */
  8. } else {
  9.   /* not supported */
  10. }

javascript 操作css变量

读取变量的值
变量是跟着标签走的，变量定义在哪个标签上则从哪个标签上获取那个变量

  1. const dom = document.querySelector('selector');
  2. dom.style.getPropertyValue('--color').trim();;

修改CSS变量的值

  1. const dom = document.querySelector('selector');
  2. dom.style.setProperty('--color', 'white');

删除变量

  1. document.body.style.removeProperty('--primary');

JavaScript 可以将任意值存入样式表。下面是一个监听事件的例子，事件信息被存入 CSS 变量。

  1. const docStyle = document.documentElement.style;
  3. document.addEventListener('mousemove', (e) => {
  4.   docStyle.setProperty('--mouse-x', e.clientX);
  5.   docStyle.setProperty('--mouse-y', e.clientY);
  6. });

那些对 CSS 无用的信息，也可以放入 CSS 变量。

  1. --foo: if(x > 5) this.width = 10;

上面代码中，—foo的值在 CSS 里面是无效语句，但是可以被 JavaScript 读取。这意味着，可以把样式设置写在 CSS 变量中，让 JavaScript 读取。

所以，CSS 变量提供了 JavaScript 与 CSS 通信的一种途径。

IE不兼容CSS变量的解决方案

使用原生JS来更改CSS样式，或者动态生成CSS样式，引入到页面中