当可调整大小的元素覆盖屏幕高度和宽度的 100% 时禁用它们

Question

我想从脚本的执行中创建一个条件。 当浏览器内的窗口处于 100% 宽度和 100% 高度时，我想禁用脚本运行。

这是脚本：https://stackoverflow.com/a/71189606/9444690

element = document.getElementById("window");

let heightPercentage = Math.round(
 (element.clientHeight / window.innerHeight) * 100
);

let widthPercentage = Math.round(
 (element.clientWidth / window.innerWidth) * 100
);

if (heightPercentage < 100 && widthPercentage < 100) {
  makeResizable(element, 400, 225, 10);
}

function makeResizable(element, minW = 100, minH = 100, size = 20) { ...

我尝试过这个，我还尝试通过按下按钮来更改脚本的类型。正如这篇文章中提到的，它更改为 type="application/JSON"：https://stackoverflow.com/a/26483433/9444690 但什么也没发生。

Answer 1

我认为最好的方法是使用计算值：100% 确定它是屏幕上的实际尺寸...

values();


function values() {
  let compStyles = window.getComputedStyle(document.body);
  let w = compStyles.getPropertyValue('width');
  let h = compStyles.getPropertyValue('height');
  document.querySelector('#bodyValues').innerHTML = 'Body width: ' + w + ' / height: ' + h;
  console.log(parseFloat(w), parseFloat(h));

  compStyles = window.getComputedStyle(document.querySelector('.container'));
  w = compStyles.getPropertyValue('width');
  h = compStyles.getPropertyValue('height');
  document.querySelector('#containerValues').innerHTML = 'Body width: ' + w + ' / height: ' + h;
  console.log(parseFloat(w), parseFloat(h));
}

body {
  background-color: #3b404e;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  background-color: red;
}

<div class="container">
  <button id="plus">+</button>
  <div id="bodyValues"></div>
  <div id="containerValues"></div>
</div>

现在您可以将元素的实际值与主体大小进行比较。获取计算的样式宽度，用 px 返回值，parseFloat（如果您喜欢 int parseInt）去掉 px。