vue中如何将js中的变量赋值给css以实现对样式的动态控制

JavaScript029

vue中如何将js中的变量赋值给css以实现对样式的动态控制,第1张

方法一：

使用原生js操作dom的方法，来改变css的样式，比如

document.getElementById(id).style.property =newstyle

这里的new style 里面就可以使用js传入的变量。

此方法固然可以，但是对应改变一些复杂的css，比如动画什么的，操作起来就不怎么方便了。此时，如下的方法二就显得尤为重要了！

方法二：

利用css变量来处理，思路是将js变量赋值给css变量，然后在css样式中使用css变量。如下图所示，我们传入year变量，然后生成了--top、--bottom等变量，然后这些变量就可以在css中使用！

$ 符号 被 Sass 占用

@ 符号 被 less 占用

因此CSS中采用了 --

JS:

可以看到var只是个声明变量的关键字，color才是变量名。

PHP:

Scss:

CSS在使用变量的时候用到了一个函数叫var()：

CSS:

创建个支持vue3的vite项目

进入到该文件夹

安装依赖

创建一个组件

使用中文引入变量

参考：

Vue 超好玩的新特性：在 CSS 中使用 JS 变量

这个是可以实现的额，js通过修改浏览器的DOM对象是可以修改css样式的值的。

代码实例如下：

<!doctype html>    

<html>    

<head>    

<meta charset="UTF-8">    

<title>变色</title>    

<style type="text/css">    

#div1{width: 200px height: 200px background: #ccc}    

</style>    

<script type="text/javascript">    

function chan(){    

var change=document.getElementById('div1')    

change.style.width="100px"    

change.style.height="50px"    

change.style.background="#000000"    

}    

</script>    

</head>    

<body>    

<div id="div1"></div>    

<input type="button" value="改变" onclick="chan()">

通过更改css的属性实现了颜色和宽高的改变。