如何在Astro组件的HTML中使用<script>标签内的变量

你遇到的核心问题是：Astro默认的服务端渲染（SSR）上下文和客户端脚本的上下文是分离的。服务端渲染模板时，document对象不存在，你脚本里的height变量在服务端始终是0；而客户端脚本运行时，模板已经渲染完成，没法再反向修改服务端生成的类名。

下面是两种可行的解决方案：

方案1：客户端脚本直接修改目标元素样式 #

直接在客户端脚本中获取高度后，动态设置目标元素的内联样式或类名，绕开服务端渲染的限制：

<div id="my-container">需要获取高度的容器</div>
<!-- 目标元素先写基础类名 -->
<div id="target-element" class="hidden lg:block"></div>

<script>
  // 确保在客户端环境执行
  if (typeof document !== 'undefined') {
    // 获取目标容器高度
    const titleContainer = document.getElementById('my-container');
    const containerHeight = titleContainer?.offsetHeight ?? 0;
    // 获取要设置样式的元素
    const targetElement = document.getElementById('target-element');
    if (targetElement) {
      // 直接设置padding-top样式
      targetElement.style.paddingTop = `${containerHeight}px`;
    }
  }
</script>

方案2：使用Astro客户端组件（Island） #

如果需要更组件化的实现，可以把动态样式的部分做成Astro客户端组件，通过client:指令让它在客户端渲染，这样就能直接在组件内获取DOM高度并应用：

1. 创建客户端组件（比如DynamicPadding.astro） #

---
---
<script>
  // 客户端渲染时直接获取DOM
  const titleContainer = document.getElementById('my-container');
  const height = titleContainer?.offsetHeight ?? 0;
  // 获取当前组件的根元素
  const root = document.currentScript?.parentElement;
  if (root) {
    root.style.paddingTop = `${height}px`;
  }
</script>

<div class="hidden lg:block"></div>

2. 在主组件中引入 #

<div id="my-container">需要获取高度的容器</div>
<!-- 使用client:load指令让组件在客户端加载时渲染 -->
<DynamicPadding client:load />

为什么原方法不可行？ #

Astro的模板语法是在服务端执行的，服务端没有浏览器的document对象，所以你脚本里的height变量在服务端渲染阶段始终为0。当客户端脚本运行时，模板已经生成了静态HTML，此时再修改height变量也无法影响已经渲染好的类名。

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