微信小程序通过js动态修改css样式的方法,以及css变量

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

前言

不知道各位小帅有没有遇到这种问题,在微信小程序开发的时候,我们想要将某个文字大小变大,那么本篇文章就是解决这个问题。文章来源地址https://www.toymoban.com/news/detail-736706.html

1.直接方法

<view style="font-size: {{textFont}};">本人是吴彦祖</view>
data:{
    textFont:'28rpx'
}

onchangeTextSize(){
    this.setData({
      textFont: '40rpx'
    })
}

 2.利用css变量

<view clas="box" style="--text-font: {{textFont}};">本人是吴彦祖</view>
data:{
    textFont:'28rpx'
}

onchangeTextSize(){
    this.setData({
      textFont: '40rpx'
    })
}
page{
--text-font:'28rpx'
}
.box{
font-size:var(--text-font)
}

到了这里,关于微信小程序通过js动态修改css样式的方法,以及css变量的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • Vue3通过JS修改Css样式(附节点获取相关知识)

    方法一:通过获取节点style(获取标签节点) 方法二:通过动态设置class 方法三:直接动态设置style  附节点获取相关知识

    2024年02月16日
    浏览(43)
  • 如何获取data中的值?如何取出,存储数据?跳转外部链接?与非本机联调?修改头部标题?动态更改样式?动态获取设备宽高?(微信小程序)

    工具:微信开发者工具 1.如何获取data中的值? 使用 this.data. 2.如何修改data中的值?使用 this.setData({key: value}),其中key为data中修改的数据,value为要修改的值 3.如何存储数据? 1.简单数据wx.setStorage({ key: ‘key’,data: value} 2.对象类数据wx.setStorage({ key: ‘key’,data: {}} 4.跳转外部

    2024年02月10日
    浏览(66)
  • 微信小程序修改placeholder样式

    微信小程序有既定的修改placeholder的标签

    2024年04月10日
    浏览(57)
  • 微信小程序生成菊花码,通过Java修改中间图片为上传的图片,含前端使用方法

    场景: 在微信小程序环境下,用户上传个人头像,生成个人的微信小程序菊花维码,可以无限申请并生成二维码,然后二维码中间的圆形为用户自己上传的头像,最后可以通过生成的二维码扫码进入个人简介页面。 因为图片捣腾了一些时间,记录一下,类似问题给的时间都

    2024年02月13日
    浏览(242)
  • 微信小程序修改radio的样式

    二: 注解: bindchange:有变化执行事件 wx:for-items:表示对{{items}}进行循环 radio中的color属性:主要设置选中之后图标颜色 radio中的style属性:这里主要用来展示图标的大,scale缩放 radio中的value属性:主要用于事件bindchange执行之后能获取到值 radio中的checked属性:设置默认值  

    2024年02月04日
    浏览(51)
  • 微信小程序修改vant组件样式

    1 背景 在使用vant组件开发微信小程序的时候,想更改vant组件内部样式,达到自己想要的目的(van-grid组件改成宫格背景色为透明,默认为白色),官网没有示例,通过以下几步修改成功。 2 步骤 2.1 查看官方文档 Grid 外部样式类 支持修改Grid组件样式,我们在组件上添加该属

    2024年02月09日
    浏览(74)
  • 微信小程序使用 checkbox 如何修改样式?

    主要通过 .wx-checkbox-input 、 .wx-checkbox-input-checked 以及 .wx-checkbox-input-checked::before 三个类名来设置 checkbox 的样式。 .wx-checkbox-input 用于设置未选中时框的样式 .wx-checkbox-input-checked 用于设置选中后框的样式 ,为了覆盖原生样式,需要与 .wx-checkbox-input 类连写,否则权重不够。 .

    2024年02月12日
    浏览(60)
  • 微信小程序查看官方样式及修改checkbox样式为圆圈

    小程序中checkbox的样式是正方形的,设计图上给的是一个圆圈,在查看官方demo的时候发现了怎么修改的 首先在微信官方文档上找到复选框的demo 然后审查代码找到复选框的样式部分 可以看到选中的复选框的class为wx-checkout-input 选中的样式为wx-checkbox-input-checked 这样我们就可以

    2024年02月03日
    浏览(57)
  • 【微信小程序】checkbox,radio的样式修改

    一、checkbox样式修改 默认勾选与未勾选样式 wxml 设置wxss文件 更改大小、勾选背景颜色等: 修改radio的样式为环形 二、radio样式修改 wxml中的color要给一个值 设置wxss文件

    2024年02月11日
    浏览(40)
  • CSS:浏览器设置placeholder样式 / 微信小程序设置placeholder样式

    一、web 设置placeholder 设置浏览器的placeholder样式 二、微信小程序设置placeholder 在小程序中设置placeholder样式需要使用组件的内置属性。可以通过以下方式设置input和textarea的placeholder样式: 在上面的示例中,placeholder-style属性被设置为一个字符串,包含了CSS样式。在这个字符串

    2024年02月04日
    浏览(63)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包