js监控窗口大小

你可以使用 `window.innerWidth` 和 `window.innerHeight` 来获取当前窗口的宽度和高度。同时，你还可以使用 `window.onresize` 事件来监听窗口大小的改变。

以下是一个示例代码：

function reportWindowSize() {
  console.log("Window size: " + window.innerWidth + " x " + window.innerHeight);
}

window.onresize = reportWindowSize;

这段代码会在窗口大小改变时自动调用 `reportWindowSize` 函数，并输出当前窗口的宽度和高度。

相关问题

javascript适应窗口大小

回答: 要使JavaScript适应窗口大小，可以使用以下方法:
1. 在窗口大小变化时调用echarts的resize函数，以使图表自动适应窗口大小。可以在window.onresize事件中添加myChart.resize()函数来实现。\[2\]
2. 设置body样式的宽度和高度为100%，以使其占满整个窗口。可以在样式表中添加html, body { width: 100%; height: 100%; }来实现。\[1\]
3. 如果需要隐藏滚动条，可以在样式表中添加overflow: hidden;来隐藏滚动条。\[3\]

通过以上方法，可以使JavaScript适应窗口大小并实现相应的效果。
#### 引用[.reference_title]
- *1* *2* *3* [Qt+ECharts开发笔记（二）：Qt窗口动态调整大小，使ECharts跟随Qt窗口大小变换而变换大小](https://blog.csdn.net/qq21497936/article/details/125676059)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

js根据窗口大小适配水印

要根据窗口大小适配水印，你可以使用JavaScript来动态创建并定位水印元素。下面是一个简单的示例:

// 创建水印元素的函数
function createWatermark() {
  // 创建水印元素
  var watermark = document.createElement('div');
  watermark.innerText = '水印内容'; // 设置水印内容

  // 设置水印元素样式
  watermark.style.position = 'fixed';
  watermark.style.top = '50%';
  watermark.style.left = '50%';
  watermark.style.transform = 'translate(-50%, -50%)';
  watermark.style.opacity = '0.5'; // 设置透明度
  watermark.style.pointerEvents = 'none'; // 禁止水印元素阻挡鼠标事件

  // 将水印元素添加到body中
  document.body.appendChild(watermark);
}

// 监听窗口大小变化的函数
function handleResize() {
  var watermark = document.getElementById('watermark');
  if (watermark) {
    // 如果水印元素已存在，则移除
    watermark.parentNode.removeChild(watermark);
  }
  // 创建新的水印元素
  createWatermark();
}

// 初始化时创建水印元素
createWatermark();

// 监听窗口大小变化事件
window.addEventListener('resize', handleResize);

在上面的代码中，createWatermark函数用于创建水印元素，并设置其样式和内容。handleResize函数用于监听窗口大小变化事件，并在窗口大小变化时重新创建水印元素。最后，通过初始化调用createWatermark函数来创建初始的水印元素，并通过监听窗口大小变化事件来更新水印元素的位置和样式。

你可以根据实际需求修改水印元素的样式和内容，例如调整位置、颜色、透明度等。希望这个示例对你有帮助！