如何在XSLT转换中读取rate元素值设置Progressbar的CSS width样式

解决方案 #

你需要使用XSLT的属性值模板（Attribute Value Template） 特性，直接在属性值里用{XPath表达式}的格式插入动态取值即可，无需额外写复杂标签，实现成本极低。

修改后的精简XSLT代码 #

<p>
    <xsl:value-of select="skill" />
</p>
<div class="progress">
    <div class="progress-bar bg-success" style="width:{rate}%">
        <xsl:value-of select="rate" />
    </div>
</div>

实现说明 #

• 用{}包裹的XPath表达式rate会被XSLT处理器自动解析，提取对应<rate>节点的文本值
• 拼接后最终生成的HTML style属性就会变成width:95%，完全符合动态取值的需求
• 如果需要兼容更复杂的逻辑（比如加最小值校验、额外样式拼接），也可以用<xsl:attribute>标签的写法，示例如下：

<div class="progress-bar bg-success">
    <xsl:attribute name="style">
        <xsl:text>width:</xsl:text>
        <xsl:value-of select="rate" />
        <xsl:text>%</xsl:text>
        <!-- 可在此处扩展其他逻辑，例如rate小于10时强制设为10%避免进度条过窄 -->
    </xsl:attribute>
    <xsl:value-of select="rate" />
</div>

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