get-element-by-id-multiple-root-node.uvue

<template>
  <view class="uni-padding-wrap">
    <page-head
      id="page-head"
      title="getElementById-multiple-root-node"
    ></page-head>
    <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>
</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>