Vue DOM 요소 스타일 과 스타일 변경 예제 가 져 오기

1227 단어 vuedom
vue 에서 document 으로 dom 노드 를 가 져 와 노드 스타일 을 변경 할 때'style'is not defende 의 오류 가 발생 할 수 있 습 니 다.이 때 mounted 에서$refs 로 스타일 을 가 져 오고 변경 할 수 있 습 니 다.

<template>
 <div style="display: block;" ref="abc">
  <!-- ... -->
 </div>
</template>
<script>
  export default {
   mounted () {
     console.log(this.$refs.abc.style.cssText)
   }
  }
</script>
결 과 는 display:block;
만약 에 div 에 전체 화면 배경 그림 을 설정 하려 면 화면 높이 를 가 져 와 서 값 을 부여 해 야 합 니 다.

<template>
 <div ref="nana">
  <!-- ... -->
 </div>
</template>

<script>
export default {
 mounted () {


   let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
   let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

  this.$refs.nana.style.height = h +'px';

  }

}

</script>

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기