1. Dynamic binding styles in HTML:

<div :style="styleChange"></div>
Copy the code

2. Definition in data:

data(){
   return{
styleChange: {  
      height: "",
       width:''    
  },}

}
Copy the code

3. Methods:

mounted() { const that = this; that.styleChange.height = window.innerHeight + "px"; Width = window.innerWidth+'px'; // Screen height that.stylechange. width = window.innerWidth+'px'; // Screen width console.log(" height ", thate.stylechange.height); Console. log(" width ", thate.stylechange.width); }Copy the code

  1. Page visible region wide: document. Body. ClientWidth

  2. High page visible area: the document. The body. ClientHeight

  3. Page visible region wide: document. Body. OffsetWidth (including line width)

  4. High page visible area: the document. The body. OffsetHeight (including line width)

  5. Page of text in full width: document. Body. ScrollWidth

  6. High page of text in full: document. Body. ScrollHeight

  7. The page is rolled high: document.body.scrolltop

  8. Page is rolled to the left: document.body.scrollLeft

  9. Window. ScreenTop in the body of the page

  10. Left of the page body: window.screenleft

  11. High screen resolution: window.screen.height

  12. Width of screen resolution: window.screen.width

  13. Screen available workspace height: window. Screen. AvailHeight

  14. Screen available workspace width: window.screen.availWidth

  15. Get the window width: window.innerWidth

  16. Get the window height: window.innerheight