如何在JS中获取CSS vw和vh？

Question

我正在尝试在JavaScript中使用CSS VW和VH值，因为我想使它们适应更改某些JS变量。但是，在研究了不同的方法之后，这些值似乎已经略有一点，因为它弄乱了我的显示。我已经尝试使用：

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

但是

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

它们似乎没有起作用。

有人有想法吗？任何帮助都非常感谢！

谢谢！

Answer 1

一切都很好
使用“ px” ，

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

我认为这会很好，请尝试一下。

Answer 2

// 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>

看看这支笔，它得到了主体元素和内部窗口的 vh 和 vw 。移动侧边栏，表格中的 domrect 将在调整大小时发生变化。

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