Vue3中CSS使用JS变量

html-css013

Vue3中CSS使用JS变量,第1张

$ 符号 被 Sass 占用

@ 符号 被 less 占用

因此CSS中采用了 --

JS:

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

PHP:

Scss:

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

CSS:

创建个支持vue3的vite项目

进入到该文件夹

安装依赖

创建一个组件

使用中文引入变量

参考：

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

通过js来改变CSS属性，使用jQuery可以很方便的实现，像这样：

$("img").css('border-color','red')

就可以把边框颜色都变成红色。

这是针对此问题的测试页面

2、这是3张图片

<img src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=975878983,2392470128&fm=11&gp=0.jpg'>

<img src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=61343736,951557457&fm=11&gp=0.jpg'>

<img src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1354592590,1762022981&fm=11&gp=0.jpg'>

3、这是图片的样式，边框默认为灰色。

img{

max-width:200px

border-color:gray

border-width:10px

border-style:solid

}

4、现在通过这几行用到jQuery的代码，控制图片边框根据鼠标移入移出边框变灰和变红。

$(function(){

$("img").on('mouseover',function(){

$(this).css('border-color','red')

}).on('mouseout',function(){

$(this).css('border-color','gray')

})

})

5、效果如图