Vue , UniApp 动态修改样式伪类

var 函数的作用是获取自定义属性，var 只能在{}内声明,作用范围由{}的选择器决定

利用css3的var()实现运行时改变scss的变量值

css 复制代码

<!-- 声明 -->
body{
--name:value;//body内有效
}
<!-- 使用 -->
.test{
   attr: var(--name,defaultValue) //当--name不存在时,使用defaultValue
   var(--name):#369;//错误使用方式
}

CSS中原生的变量定义语法是：--，变量使用语法是：var(--)，其中*表示我们的变量名称。

但是，不能包含$， $，\^，(，%等字符，普通字符局限在只要是"数字\[0-9$ ""字母 $a-zA-Z$ ""下划线_"和"短横线-"这些组合，但是可以是中文，日文或者韩文。

运行时改变scss变量值

这个方法并不是能直接改变scsss变量的值,但是能做到一样的效果,对于需要一个变量控制多个属性的更为有效简洁

单变量控制单条属性的就没必要用了,这方法就是修改style属性而已,单对单和你之间在style写那条属性是一样的

简单来说就是将scss的变量交由css变量控制

css 复制代码

$colors: (
primary: #FFBB00,
secondary: #0969A2
);
Selector1{
@each $name, $color in $colors {
--color-#{$name}: $color;
}
}
<!-- Selector1的生成效果 -->
:root {
--color-primary: #FFBB00;
--color-secondary: #0969A2;
}
<!-- 使用方式一  直接使用css变量 -->
Selector{
color:var(--color-primary);
}
<!-- 使用方式二 利用scss的函数,以符合scss语法 推荐 -->
@function color($color-name) {
@return var(--color-#{$color-name});
}
body {
color: color(primary); //使用
}
<!-- body生成效果 -->
body {
color: var(--color-primary); //这样就可以被js设置了
}

JS 设置css变量,即设置运行scss变量

javascript 复制代码

domObject.style.setProperty(name,value);//name为css变量名 e.g: --color-primary

在单文件组件(.vue)中若是使用了scoped 那么:root、:body等选择器的效果并不会如同你所预期的

css 复制代码

[data-v-1374924e]:root {
--test:100px;
}

变量--test 根本找不到,理由是并没有这个root,vue组件scoped的特性,只在本组件有效,但组件又没有完整的document,即组件内部没有root

所以在vue文件中,仔细思考css变量声明的选择器范围,避免变量无效

var()函数使用注意点：

出现位置：必须要在style中

css 复制代码

　// css 中
　<style>
　　body{
　　　--self-property: 1;
　　}
　</style>
　　　　
 // html 中
 <div style="--self-property: 1"></div>

格式要求

自定义属性必须要加上**" -- "**前缀来标明这是一个自定义属性, 否则浏览器无法解析

获取方式

var(--self-property) 直接获取, 不需要加引号, 一般会配合calc()函数来使用

高级使用案例

html 复制代码

<div class="wavy">
    <span style="--i:1">内</span>
    <span style="--i:2">容</span>
    <span style="--i:3">加</span>
    <span style="--i:4">载</span>
    <span style="--i:5">中</span>
    <span style="--i:6">.</span>
    <span style="--i:7">.</span>
    <span style="--i:8">.</span>
</div>
 
.wavy span{
   position: relative;
   display: inline-block;
   color: #ffffff;
   font-size: 2em;
   animation: animate 1s ease-in-out infinite;
   animation-delay: calc(.1s*var(--i));
 }

伪类修改：attr(abc) var、

html 复制代码

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊用法attr</title>
</head>
<body>
 
<div>
    <!-- 随便在标签上声明一个属性abc -->
    <div class="box" abc="123"></div>
</div>
 
<style>
    .box {
      width: 100px;
      height: 100px;
      background-color: #ccc;
      position: relative;
    }
    .box::after {
        content: attr(abc);
        position: absolute;
        top: 0;
        right: 0;
    }
</style>
 
</body>
</html>

css 复制代码

以:data-**** 命名  
// templete
 <view class="corner-markers"  :data-foo="props.cornerMarkersList">
// CSS
.corner-markers::after {
  content: attr(data-foo) " ";
  position: absolute;
  display: block;
  color: #FFFFFF;
  background: #FF7272;
  padding: 6rpx 10rpx;
  border-radius: 50%;
  font-size: 20rpx;
}

attr()函数使用注意点

attr()函数与var()函数有一个很大的相同之处, 都是获取属性值,

html 复制代码

　var()函数必须要获取内联属性, 即必须要是在啊style中的属性

　attr()函数需要获取的标签中的属性, 也可以是自定义属性, 但是必须要是在标签中的属性 
　　　　
  出现位置
　　　　
    <div self-property="value"></div>
　
  获取方式
　　　　
  attr(self-property)