javascript - XSLT:在元素标记中输出 Javascript

Question

使用 XSLT，我如何输出以下内容

<div onclick="var e = document.getElementById('<xsl:value-of select="div_id"/>');
          if(e.style.display == 'block')
            e.style.display = 'none';
          else
          { 
            e.style.display = 'block';
            e.scrollIntoView();
          }" 
          style="text-decoration: underline; color: blue;"
>Toggle</div>

注意:代码应该驻留在onclick属性中，我只能访问文档的主体。

Answer 1

一种方法是使用 AVT ( Attribute Value Templates ):

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output omit-xml-declaration="yes" indent="yes"/>
 <xsl:strip-space elements="*"/>

 <xsl:template match="/">
    <div style="text-decoration: underline; color: blue;"
     onclick="var e = document.getElementById('{div_id}');
              if(e.style.display == 'block')
                e.style.display = 'none';
              else
              {{
                e.style.display = 'block';
                e.scrollIntoView();
              }}">Toggle</div>
 </xsl:template>
</xsl:stylesheet>

当此转换应用于以下 XML 文档时:

<div_id>3</div_id>

产生了想要的结果:

<div style="text-decoration: underline; color: blue;" onclick="var e = document.getElementById('3');               if(e.style.display == 'block')                 e.style.display = 'none';               else               {                 e.style.display = 'block';                 e.scrollIntoView();               }">Toggle</div>

请注意:指定此类 AVT(属性值模板)时，必须将必须生成的任何 { 或 } 字符加倍.

另一种方法是使用xsl:attribute:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output omit-xml-declaration="yes" indent="yes"/>
 <xsl:strip-space elements="*"/>

 <xsl:template match="/">
    <div style="text-decoration: underline; color: blue;">
      <xsl:attribute name="onclick">
     var e = document.getElementById('<xsl:value-of select="div_id"/>');
              if(e.style.display == 'block')
                e.style.display = 'none';
              else
              {
                e.style.display = 'block';
                e.scrollIntoView();
              }</xsl:attribute>Toggle</div>
 </xsl:template>
</xsl:stylesheet>