get-element-by-id.uvue

<template>
  <view>
    <page-head id="page-head" title="getElementById"></page-head>
    <view class="uni-padding-wrap">
      <text id="text">this is text</text>
      <view id="view" class="uni-common-mt" style="border: 1px solid red"
        >this is view</view
      >
      <button class="uni-btn" @click="changePageHeadBackgroundColor">
        修改 page-head 背景色
      </button>
      <button class="uni-btn" @click="changeTextColor">
        修改 text 字体颜色
      </button>
      <button class="uni-btn" @click="changeViewStyle">
        修改 view 宽高及背景色
      </button>
      <button class="uni-btn" @click="goMultipleRootNode">
        跳转多根节点示例
      </button>
    </view>
  </view>
</template>

<script lang="uts">
export default {
  data() {
    return {
      checked: false,
      homePagePath: '/pages/tabBar/component',
      launchOptionsPath: '',
    }
  },
  methods: {
    getElementByNotExistId() : Element | null {
      return uni.getElementById('not-exist-id')
    },
    changePageHeadBackgroundColor() {
      const pageHead = uni.getElementById('page-head')!
      pageHead.style.setProperty('backgroundColor', 'red')
    },
    changeTextColor() {
      const text = uni.getElementById('text')!
      text.style.setProperty('color', 'red')
    },
    changeViewStyle() {
      const view = uni.getElementById<UniViewElement>('view')
      if (view !== null) {
        view.style.setProperty('width', '90%')
        view.style.setProperty('height', '50px')
        view.style.setProperty('backgroundColor', '#007AFF')
      }
    },
    goMultipleRootNode() {
      uni.navigateTo({ url: '/pages/API/get-element-by-id/get-element-by-id-multiple-root-node' })
    }
  }
}
</script>