小程序css怎么和js关联

小程序CSS和JS的关联方式主要有：通过选择器操作DOM元素、通过数据绑定实现样式动态变化、通过条件渲染控制样式。其中，通过数据绑定实现样式动态变化是最常用的方式。

通过数据绑定实现样式动态变化，可以通过在小程序的WXML文件中使用数据绑定，将CSS样式与JS中的数据状态关联。当JS中的数据变化时，WXML中的样式会自动更新。这使得界面与逻辑更紧密地结合在一起，代码更简洁且易于维护。例如，可以通过在JS中定义一个数据属性来控制某个元素的显示或隐藏，或者根据不同的状态来应用不同的样式。

一、通过选择器操作DOM元素

在小程序中，可以通过选择器获取到DOM元素，然后对其样式进行操作。具体操作方法如下：

获取元素： 使用wx.createSelectorQuery来获取DOM元素。例如：

Page({
  changeStyle: function() {
    const query = wx.createSelectorQuery();
    query.select('#myElement').boundingClientRect(function(rect){
      rect.id      // 节点的ID
      rect.dataset // 节点的dataset
      rect.left    // 节点的左边界坐标
      rect.right   // 节点的右边界坐标
      rect.top     // 节点的上边界坐标
      rect.bottom  // 节点的下边界坐标
      rect.width   // 节点的宽度
      rect.height  // 节点的高度
    }).exec()
  }
})

修改样式： 获取到元素后，可以通过设置属性来修改其样式。例如：

Page({
  changeStyle: function() {
    const query = wx.createSelectorQuery();
    query.select('#myElement').boundingClientRect(function(rect){
      rect.id.style.backgroundColor = 'red';
    }).exec()
  }
})

二、通过数据绑定实现样式动态变化

数据绑定是小程序中最常用的方式，通过在WXML文件中使用数据绑定，将CSS样式与JS中的数据状态关联起来。

定义数据： 在JS文件中定义数据状态。例如：

Page({
  data: {
    isActive: false
  },
  toggleActive: function() {
    this.setData({
      isActive: !this.data.isActive
    });
  }
})

绑定样式： 在WXML文件中通过数据绑定来应用样式。例如：

<view class="{{isActive ? 'active' : 'inactive'}}" bindtap="toggleActive">Click me</view>

定义样式： 在CSS文件中定义相应的样式。例如：

.active {
  background-color: green;
}
.inactive {
  background-color: red;
}

三、通过条件渲染控制样式

条件渲染是指根据某个条件来决定是否渲染某个元素或应用某个样式。

定义数据： 在JS文件中定义条件数据。例如：

Page({
  data: {
    isVisible: true
  },
  toggleVisibility: function() {
    this.setData({
      isVisible: !this.data.isVisible
    });
  }
})

条件渲染： 在WXML文件中使用条件渲染控制样式。例如：

<view wx:if="{{isVisible}}" class="visible">I am visible</view>
<view wx:if="{{!isVisible}}" class="hidden">I am hidden</view>
<view bindtap="toggleVisibility">Toggle Visibility</view>

定义样式： 在CSS文件中定义相应的样式。例如：

.visible {
  display: block;
}
.hidden {
  display: none;
}

四、使用外部工具和库

有时为了简化开发，可以使用一些外部工具和库来管理小程序的CSS和JS关联。例如：

使用小程序框架： 如Taro、WePY等，这些框架提供了更加丰富的API和更高的开发效率。例如：

import Taro, { Component } from '@tarojs/taro';
import { View } from '@tarojs/components';
import './app.scss';
export default class App extends Component {
  state = {
    isActive: false
  };
  toggleActive = () => {
    this.setState({
      isActive: !this.state.isActive
    });
  };
  render() {
    const { isActive } = this.state;
    return (
      <View className={isActive ? 'active' : 'inactive'} onClick={this.toggleActive}>
        Click me
      </View>
    );
  }
}

使用项目管理工具： 如PingCode和Worktile，这些工具可以帮助团队更好地管理小程序项目，提升开发效率和代码质量。

五、总结

通过选择器操作DOM元素、通过数据绑定实现样式动态变化、通过条件渲染控制样式是小程序中常见的CSS和JS关联方式。通过数据绑定实现样式动态变化是最常用的方式，可以通过在WXML文件中使用数据绑定，将CSS样式与JS中的数据状态关联起来，使得界面与逻辑更紧密地结合在一起，代码更简洁且易于维护。在实际开发中，可以根据具体需求选择合适的方式，并结合外部工具和库来提高开发效率和代码质量。