如何获取响应式.workout DIV高度以适配SVG动画？

嘿，我来帮你搞定这个问题！作为JS初学者，把SVG动画限制在特定DIV里确实需要调整几个关键点，我一步步给你讲清楚：

1. 先定位目标DIV并做容错处理 #

首先得精准获取到class为workout的DIV元素，同时加个判断避免找不到元素时报错：

// 获取目标DIV
const workoutDiv = document.querySelector('.workout');

// 容错：如果找不到元素就终止代码，避免后续报错
if (!workoutDiv) {
  console.error('页面中找不到class为"workout"的DIV元素');
  return;
}

2. 获取DIV的实际高度 #

你需要的是这个DIV的高度，这里有两个常用属性可选，根据你的需求挑：

• offsetHeight：包含DIV的内容高度、内边距（padding）和边框（border），不含外边距（margin）
• clientHeight：包含内容高度和内边距，不含边框和滚动条

如果你不确定选哪个，优先用offsetHeight，它更贴近DIV的实际占位高度。

3. 修改SVG代码，绑定到目标DIV #

原代码里用了窗口尺寸，现在我们替换成目标DIV的尺寸，还要把SVG放到DIV内部，同时设置样式让它成为背景不遮挡其他内容：

// 创建SVG元素（必须保留SVG命名空间，否则SVG无法正常渲染）
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

// 设置SVG尺寸：宽度用100%自适应DIV，高度用DIV的实际高度
svg.setAttribute('width', '100%');
svg.setAttribute('height', workoutDiv.offsetHeight);

// 关键样式：让SVG成为DIV的背景层
svg.style.position = 'absolute';
svg.style.top = '0';
svg.style.left = '0';
svg.style.zIndex = '-1'; // 把SVG放到DIV内容的下方

// 把SVG添加到目标DIV内部
workoutDiv.appendChild(svg);

// 这里继续写你原有的SVG动画逻辑，比如添加图形、设置动画属性等

4. 适配响应式：窗口变化时更新SVG高度 #

因为你的DIV是响应式的，窗口大小变化时它的高度可能会改变，所以加个监听事件自动更新SVG尺寸：

window.addEventListener('resize', () => {
  // 每次窗口大小变化时，重新设置SVG的高度
  svg.setAttribute('height', workoutDiv.offsetHeight);
});

额外注意：给目标DIV加CSS定位 #

为了让内部绝对定位的SVG能相对于DIV定位，需要给.workout加个基础定位样式：

.workout {
  position: relative; /* 必须设置，否则SVG会相对于整个页面定位 */
  width: 100%;
  /* 这里可以设置DIV的高度规则，比如min-height: 100vh; 或者根据需求自定义 */
}

内容的提问来源于stack exchange，提问作者Trishah