如何在同一XSL样式表中为xsl:variable赋值动态img的src属性

核心认知纠偏 #

你当前写的document.getElementByTag('img').src是浏览器端JavaScript的DOM操作语法，根本不属于XSLT的合法能力范围。XSLT是在转换阶段运行的声明式语言，执行过程中没有浏览器DOM对象的运行上下文，完全无法调用这类浏览器API，这是原代码无法生效的根本原因。

分场景实现方案 #

场景1：img元素是当前XSLT转换动态生成的输出节点 #

这类场景是你提到的“img与xsl变量处于同一个样式表”的典型情况，完全不需要等DOM渲染完成后再读取src值——XSL在生成img节点时，src的取值本身就是转换逻辑中可直接访问的源数据，直接在同作用域内引用即可，能保证变量值和img的src完全同步匹配。
正确代码示例：

<!-- 错误写法：无合法XSLT语法，调用浏览器DOM API  ❌ -->
<!-- <xsl:variable name="Input" select="document.getElementByTag('img').src" /> -->

<!-- 正确逻辑：在循环作用域内直接引用源XML的对应属性  ✅ -->
<xsl:for-each select="/root/contentList/item">
  <!-- 动态生成img节点，src取值来自当前循环节点的属性 -->
  <img src="{@dynamicImgSrc}" class="target-img" />
  
  <!-- 变量直接取同一个源属性，与img的src完全一致，无需事后抓取DOM -->
  <xsl:variable name="Input" select="@dynamicImgSrc" />

  <!-- 基于$Input生成绑定逻辑的动态按钮 -->
  <button data-img-src="{$Input}">切换图片</button>
</xsl:for-each>

注：如果需要取当前作用域内其他嵌套节点的img的src，直接用标准XPath语法选择即可，比如取当前节点下嵌套的img的src：<xsl:variable name="Input" select="./nestedImg/@src" />

场景2：img元素是输入源XML文档中的原生节点 #

如果img节点不是XSL动态生成的，而是待转换的源XML中自带的内容，直接用标准XPath选择对应节点的src属性即可，完全不需要调用DOM API：

<!-- 取文档全局第一个img节点的src值 -->
<xsl:variable name="Input" select="//img[1]/@src" />

<!-- 取当前循环上下文下的img节点的src值 -->
<xsl:variable name="Input" select="current()/img/@src" />

关于“按钮联动动态修改img src”的交互逻辑说明 #

如果你的需求是点击动态生成的按钮后，动态修改已经渲染到页面上的img的src值，这部分属于页面渲染完成后的浏览器运行时交互，不在XSLT的能力边界内：

• XSLT的执行是一次性的，完成转换输出HTML后，所有转换期的变量、逻辑就会销毁，完全无法捕获后续DOM的动态变化；
• 这类联动逻辑需要做职责拆分：XSL转换阶段只负责把所有关联的源数据提前嵌入到HTML节点的自定义属性中（比如给按钮加data-img-src属性），后续的点击事件监听、img src更新、值的传递逻辑全部由页面原生JavaScript实现。

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