如何查看小程序的真实DOM？
发布于 5 年前 作者 rshi 15024 次浏览 来自 问答

比如我有一个小程序的checkbox group如下：

<checkbox-group bindchange="facilitiesChange">
  <checkbox wx:for="{{facility_list}}" wx:key="*this" value="{{item}}" class="list-checkbox iconfont .icon-{{item}}">
    <text>{{facility_name[index]}}</text>
  </checkbox>
</checkbox-group>

同时我有一段对应的样式文件是：

.wx-checkbox-input {
  display: none;
}
.list-checkbox {
  width: 100rpx;
  height: 100rpx;
  font-size: 60rpx;
  line-height: 100rpx;
  color: #eee;
  text-align: center;
}
.list-checkbox text {
  font-size: 24rpx;
  font-weight: 600;
  white-space: nowrap;
}
.list-checkbox[checked] {
  color: #9e9e9e;
}

但是实际显示效果不是预想的：

可以发现这里的空白是很特别的。但是如果查看DOM结构会发现只有这两个：

这是母元素checkbox。

这是子元素text。

很明显的，这不是真实的DOM结构。在这种情况下要对元素进行样式就很困难，因为不知道真实的结构。有没有办法强行查看真实DOM结构呢？

P.S. 顺便说明一下，如果用view而不是checkoubox：

<view wx:for="{{facility_list}}" wx:key="*this" value="{{item}}" class="list-checkbox iconfont .icon-{{item}}" style="display:inline-block">
  <text>{{facility_name[index]}}</text>
</view>

这时候显示的效果应该是这样的：

1 回复

审查元素？

回到顶部