css变量用法(原生js、小程序)

这篇具有很好参考价值的文章主要介绍了css变量用法(原生js、小程序)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

背景:写一个动效,需要先请求接口拿到数据,再根据数据计算高度,此时便想到了scss、less变量写法,但由于项目是css,那么在微信小程序css是否也可以像scss/less一样,支持变量写法呢?

答案肯定是可以的。

总结一下小程序css使用变量的用法:

1、css原始定义方式

首先在原生的html、css中是支持css变量的,在root节点里定义所需变量,便可以在整个页面使用,约定变量以--开头,调用的时候用var()函数。

用法如下:

<style>
    :root {
        --final-top: 40px;
    }

    .my-wapper{
        top: var(--final-top);
    }
</style>

在微信小程序中,使用原理相同,区别在于小程序的根结点是page选择器。

在wxss文件中定义并使用:(也可以在app.wxss中定义即可全局使用)

page {
    --final-top: 40px;
}

.my-wapper {
    top: var(--final-top);
}

也可以在wxml中使用:

<view style="top: (--final-top);">
    可以直接在wxml里面使用wxss变量!
</view>

2、在js中定义

原生js是支持动态修改css的,小程序可不可以呢?

因为我需要先拿到接口返回的数据再做处理,所以上述方法就行不通了,那我们直接在js文件中直接定义即可,需要用到setData,然后便可以在wxss文件中使用。例如:文章来源地址https://www.toymoban.com/news/detail-508925.html

 this.setData({
     style: `--point-final-height: ${130 * (19 - randomScore)}rpx;`
 })
.point-box {
    width: 328rpx;
    height: 131rpx;
    background: rgba(255, 254, 238, 0);
    position: absolute;
    top: 0;
    animation: bounce_box 1.5s linear 1s forwards;
}

@keyframes bounce_box {
    0% {
        top: 0rpx;
    }

    100% {
        top: var(--point-final-height);
    }
}

到了这里,关于css变量用法(原生js、小程序)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • unity背景缓动动效

       这算是一个很常见的小功能,比如我们在玩横版游戏的时候,背景动画会以一定的频率运动,其实现方式也有很多种。   比如,使用UGUI的image+animtion动画的方式,自己k桢实现。   还可以使用材质球本身的功能来实现,关键函数如下:    配合的材质球如下:

    2024年02月16日
    浏览(27)
  • 原生Js Canvas去除视频绿幕背景

    注: 这里的去除视频背景并不是对视频文件进行操作去除背景 如果需要对视频扣除背景并导出可以使用 ffmpeg 等库,这里仅作播放用所以采用这种方法 由于uniapp中的canvas经过封装,且 uniapp 的 drawImage 无法绘制视频帧画面,因此uniapp中不适用 实现过程是将视频使用canvas逐帧截

    2024年02月09日
    浏览(49)
  • 编程笔记 html5&css&js 038 CSS背景

    背景在样式当中首当其冲,一开始我就讲这背景很重要,背景过亮伤眼是一个重要问题,合理配置背景色,改善感观效果,也是网页设计的一件重要的事。CSS 背景属性用于定义元素的背景效果。 这些属性都和背景有关。 background-color background-image background-repeat background-attach

    2024年01月16日
    浏览(57)
  • 编程笔记 html5&css&js 039 CSS背景示例

    网页上只有三个水平并列大小相同的的DIV,大小为300p*200,如何使用CSS让它们整体水平和垂直都居中,并使用不同的背景色? 要在网页上实现三个水平并列且大小相同的div元素,每个尺寸为300像素宽和200像素高,整体居中显示且具有不同的背景颜色,你可以通过以下CSS来完成:

    2024年01月20日
    浏览(56)
  • 原生JS设置并获取全局变量

    原生JS设置并获取全局变量,干货版。 一共有且只有以下五种方式 1、通过window对象设置和获取全局变量; 通过window对象设置和获取全局变量。window对象是所有全局变量的拥有者,它是JavaScript的最顶层对象。我们可以通过window对象来设置和获取全局变量,例如: 2、使用ES6新

    2024年02月08日
    浏览(41)
  • 【前端】关于如何将html、js、css等一个html网页打包成单一的exe可执行程序文件

    要将 HTML、JS、CSS 等一个 HTML 网页打包成单一的可执行程序文件(exe),通常需要使用一些工具和框架来实现的。 这里以Electron为例,详细说一下具体的打包过程 1.安装依赖: 确保已经安装了 Node.js。在命令行中进入你的项目目录,执行以下命令安装 Electron: 2.创建文件结构

    2024年02月11日
    浏览(55)
  • css简单加载动效

    圆环加载 斑马线加载 其他

    2024年02月15日
    浏览(32)
  • 纯css实现登录表单动效

    2024年02月14日
    浏览(29)
  • 关于css中设置变量用于全局Css或者Js中使用

    一、配置变量css文件 src/styles/variables.scss 二、在组件中使用变量

    2024年02月07日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包