小程序 js可以动态设置css样式属性

Posted ClingClang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序 js可以动态设置css样式属性相关的知识,希望对你有一定的参考价值。

需求: 根据后台返回的 主题色和主题背景 动态设置样式
如果是简简单单的可以直接操作的style 就不足为虑

style="background-color:{{data.background_color ? data.background_color :\'#181C2A\'}}"

但是不排除某些在组件上不能直接操作的、加以修改的存在
于是乎搜罗了一种解决方法
举个栗子,如下:
在js中


Page({
 data: {
  theme: {
   style: \'\'
  }
 },
})
...
//简简单单赋个值 属性名 如 --color 
let primary_color = `--color:` +( res.data.primary_color || `#50b7c1`)
this.setData({
      \'theme.style\': primary_color,
    })
...

在wxml中

<!--将css变量赋值给style-->
 <view class="themeView" style="{{theme.style}}">
 </view>
 

在wxss中


/* 使用var */
.themeView{
 color: var(--color);
}
 

以上是关于小程序 js可以动态设置css样式属性的主要内容,如果未能解决你的问题,请参考以下文章

js如何更改css样式,

js动态改变样式属性(style属性)

使页面元素始终靠屏幕的右边,是使JS还是用CSS样式设置

JS 动态修改CSS 样式方法/全局

JS设置CSS样式的几种方式

JS设置CSS样式的几种方式