场景:

想在CSS中使用JS变量

解决方案:

CSS变量

示例:

以在 vue 项目为例:

  • 在行内的 style 属性中定义 CSS 变量
  • 赋值为 JS 变量
  • 在 CSS 中使用行内定义好的 CSS 变量
<!--html-->
<div class="container">
	<div class="test" :style="{
		'--width':width,
		'--color':color,
		'--margin':margin
	}"></div>
</div>
// js
data(){
	return {
		width:'200px',
		color:'#f00',
		margin:'10px 20px 10px 20px',
	}
}
.test{
	width: var(--width);
	color: var(--color);
	margin: var(--margin);
}

知识点:CSS变量——自定义属性

概念与特性
  • 带有前缀 -- 的属性名,比如 --example--name,表示的是带有值的自定义属性,其可以通过 var 函数在全文档范围内复用
  • CSS 自定义属性是可以级联的:每一个自定义属性可以多次出现,并且变量的值将会借助级联算法和自定义属性值运算出来

这意味着,同一个自定义属性名可以被多次赋值

语法

定义:
--<name> : <declaration-value>
使用:
color : var(--<name>)

var() 的使用 : https://developer.mozilla.org/zh-CN/docs/Web/CSS/var()

使用示例:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

变量范围
  • CSS变量可以在任何元素内定义
  • 将CSS自定义属性添加到:root使其可用于页面中的所有元素
  • 如果在.container选择器内添加变量,则仅在.container 内可用(作用域问题)
JS与CSS变量进行交互
  • 设置元素样式:[el].style.setProperty([属性名],[值])
    获取元素样式:getComputedStyle([el])
    获取元素样式属性值:[styles].getPropertyValue([属性名])
参考链接:
Logo

前往低代码交流专区

更多推荐