How do I get CSS vw and vh in JS?-CodePudding

I am trying to use the CSS vw and vh values in Javascript because I would like to make them adaptive to changing certain JS variables. However, after researching different methods, the values seem to be off by a little bit because it is messing up my display. I've tried using:

viewPortWidth = window.innerWidth;
viewPortHeight = window.innerHeight;

and

 viewPortWidth = document.documentElement.clientWidth;
 viewPortHeight = document.documentElement.clientHeight;

But they do not seem to be working.

Does anyone have any ideas? Any help is much appreciated!

Thanks!

CodePudding user response：

Everything is fine just concatenate the viewPortWidth and viewPortHeight with "px", like this,

viewPortWidth = window.innerWidth   "px";
viewPortHeight = window.innerHeight   "px";

I think this will work just fine, try it.

CodePudding user response：

// console.log(document.body.getBoundingClientRect(),window.innerWidth, window.innerHeight);

var getrects=()=>["top","left","height","width",
              "x","y","right","bottom"
             ].map(a=>[a,document.body.getBoundingClientRect()[a]]).concat([['window height',window.innerHeight],["window width",window.innerWidth]]);

//var entries0=getrects();

//entries0.forEach(a=>console.log(a));

const tabler=(
  tbl=document.getElementById("table"),
  entries=getrects())=>(tbl.innerHTML='',
  tbl.innerHTML=`<thead>
<tr>${entries.map(a=>`<th>${a[0]}</th>`).join("")}</tr></thead>
<tbody><tr>${entries.map(a=>`<td>${Math.round(a[1])}px</td>`).join("")}</tr></tbody>`
);

window.addEventListener("resize",e=>tabler());
tabler();

* {
  box-sizing: border-box;
  margin:1em;
}
::-webkit-scrollbar {
  display: none;
}
html{padding:0; margin:0;}
body{margin:0;padding:0;
  position: absolute; left:0; right:0; top: 0; bottom: 0px;
  background-color: aliceblue;
  
}









table {
    margin: 1em;
    background-color: #f8f9fa;
/*     border: 1px solid */
    border-collapse: collapse;
    color: #000;
        border: #a2a9b1  ridge 1px;
    font-size: 100%;
    display: table;
}
tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
    margin: 1em 0;
    background-color: #f8f9fa;
/*     border: 4px solid #a2a9b1; */
    border-collapse: collapse;
    color: #000;
}
caption{font-weight: 600; border: #a2a9b1  ridge 1px;background: white; border-bottom: 0px; padding: .3em;}
tbody{
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
    padding: .2em;
}
tr > th {
    background-color: #eaecf0;
    text-align: center;
}
tr > th, tr > td {
    border: 1px solid #a2a9b1;
    padding: 0.2em 0.4em;
}
th.thleft{
     text-align: left;
    padding-right: 1.6em;
}
p{margin:1em;}

<h4>The css you likely want is below</h4>
<code>
 
  * {
  box-sizing: border-box;
}
::-webkit-scrollbar {
  display: none;
}
html{padding:0; margin:0;}
body{margin:0;padding:0;
  position: absolute; left:0; right:0; top: 0; bottom: 0px;
  background-color: aliceblue;
  
}
</code>
<p>  Then just check window.innerWidth and innerHeight as well as the bounding rects on document.body...
  </p>

<p> you can also propertize the body rects nad then just pass them down your node tree.</p>
<table id="table">
  
</table>

check out this pen it gets vh and vw both of the body element and the inner window. Move the side bar around and the domrects in the table will change on resize.

https://codepen.io/jfrazz/pen/KKZeaGe