微信小程序如何获取非行内样式的元素样式？

在微信小程序中，获取非行内样式的元素样式可以通过 wx.createSelectorQuery() API 来实现。这个 API 允许你选择页面中的元素，并获取它们的布局信息，包括样式。

以下是一个示例代码，展示如何获取非行内样式的元素样式：

Page({
  onReady() {
    // 创建 SelectorQuery 对象
    const query = wx.createSelectorQuery();

    // 选择目标元素
    query.select('.my-element').boundingClientRect();

    // 执行查询
    query.exec((res) => {
      if (res && res[0]) {
        const element = res[0];
        console.log('元素的宽度:', element.width);
        console.log('元素的高度:', element.height);
        console.log('元素的 top 位置:', element.top);
        console.log('元素的 left 位置:', element.left);
        // 其他属性如 bottom, right 也可以获取
      }
    });
  }
});

解释：

1. wx.createSelectorQuery(): 创建一个 SelectorQuery 对象，用于选择页面中的元素。
2. query.select('.my-element'): 选择类名为 my-element 的元素。你可以使用任何有效的 CSS 选择器。
3. boundingClientRect(): 获取元素的布局信息，包括宽度、高度、位置等。
4. query.exec(): 执行查询，并在回调函数中获取结果。

注意事项：

• boundingClientRect() 返回的是元素的布局信息，而不是具体的 CSS 样式（如 color、font-size 等）。如果你需要获取具体的 CSS 样式，可能需要通过其他方式（如手动设置样式变量）来实现。
• 微信小程序的 wx.createSelectorQuery() 只能获取到元素的布局信息，无法直接获取到元素的 CSS 样式（如 color、font-size 等）。如果你需要获取具体的 CSS 样式，可能需要通过其他方式（如手动设置样式变量）来实现。

获取具体 CSS 样式的方法：

如果你需要获取具体的 CSS 样式（如 color、font-size 等），可以考虑以下方法： 1. 使用 wx.getComputedStyle(): 微信小程序目前不支持 getComputedStyle，因此无法直接使用。 2. 手动设置样式变量: 在 WXML 中通过 style 属性手动设置样式变量，然后在 JS 中获取这些变量。

例如：

<view class="my-element" style="--color: red; --font-size: 16px;">Hello World</view>

Page({
  onReady() {
    const query = wx.createSelectorQuery();
    query.select('.my-element').fields({
      computedStyle: ['color', 'fontSize']
    }, (res) => {
      console.log('元素的颜色:', res.color);
      console.log('元素的字体大小:', res.fontSize);
    }).exec();
  }
});

不过，这种方法需要你在 WXML 中手动设置样式变量，并且无法直接获取到所有 CSS 样式。

总结来说，微信小程序中获取非行内样式的元素样式主要通过 wx.createSelectorQuery() 获取布局信息，而获取具体的 CSS 样式则需要通过其他方式来实现。