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>
    </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')
      }
    }
  }
}
</script>