微信小程序,动态添加style
时间: 2024-12-15 21:27:39 浏览: 3
在微信小程序中,动态添加`style`主要是通过`wx.createSelectorQuery()`方法结合`setAttribute()`或直接操作DOM节点来实现样式修改。以下是一个简单的例子:
```javascript
Page({
data: {
dynamicStyle: ''
},
// 当需要更新样式时
updateStyle: function() {
let query = wx.createSelectorQuery();
query.select('#myElement').fields({
node: true,
}).then(res => {
let domNode = res.node;
// 动态创建style元素,并设置属性
let style = document.createElement('style');
style.innerHTML = `#myElement { color: red; }`; // 示例:改变元素的颜色为红色
// 直接添加到head中
document.head.appendChild(style);
// 或者将样式赋给domNode的style属性
domNode.setAttribute('style', this.data.dynamicStyle); // 使用data中的值
});
}
})
```
在这个例子中,`updateStyle`方法会在需要时动态地创建一个新的CSS规则,并将其应用到指定的元素上。`this.data.dynamicStyle`可以随着业务需求的变化而改变。
阅读全文