文章/答案/技术大牛

发布

社区首页 >问答首页 >如何通过Saxon-JS调整图像大小？

问如何通过Saxon-JS调整图像大小？
EN

Stack Overflow用户

提问于 2017-12-20 22:11:03

回答 1查看 225关注 0票数 1

我有一个下面的超文本标记语言文件，通过JavaScript测试图像大小。

<!DOCTYPE html SYSTEM "about:legacy-compat">
<html>
   <head>
        <title>Image Test</title>
        <style type="text/css">
            img.img-responsive {
                display: block;
                max-width: 100%;
                height: auto;
            }
            img.fig{
                display: block;
                max-width: 10000px;
                height: auto;
            }
      </style>
   </head>
   <body>
        <h2>Image Test</h2>
        <p>Image: width="100%"</p>
        <img class="img-responsive" alt="fig" src="img/fig.jpg"/>
        <script>
            window.addEventListener('load', function() {
                 [].forEach.call(document.getElementsByClassName("img-responsive"),function(elem){
                    elem.addEventListener('click',toggleClassName.bind(null,elem, "fig"));
                });
            })
            /* Toggle specified class name
               elem: DOMElement
               className: class name
            */
            function toggleClassName(elem, className){
                var s = ' ' + className;
                if (elem.className.indexOf(className) === -1){
                    elem.className += s ;
                    return true;
                }else{
                    elem.className = elem.className.replace( s , '' );
                    return false;
                }
            }
        </script>
   </body>
</html>

这可以很好地工作。所以现在我想通过使用XSLT样式表的Saxon-JS来做同样的事情。我的第一个样式表如下：

handle-click.xsl

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    xmlns:ixsl="http://saxonica.com/ns/interactiveXSLT"
    extension-element-prefixes="ixsl"
    exclude-result-prefixes="xs"
    version="3.0">
    <xsl:template match="img[contains(@class,'img-responsive')]" mode="ixsl:onclick">
        <xsl:choose>
            <xsl:when test="contains(@class,'fig')">
                <ixsl:set-style name="class" select="replace(@class,' fig','')"/>
            </xsl:when>
            <xsl:otherwise>
                <ixsl:set-style name="class" select="concat(@class,' fig')"/>
            </xsl:otherwise>
        </xsl:choose>
    </xsl:template>

</xsl:stylesheet>

我已经通过oXygen 19.1编译了这个样式表，并生成了handle-click.sef文件。然后我修改了上面的HTML以使用Saxon-JS库。

<!DOCTYPE html SYSTEM "about:legacy-compat">
<html>
   <head>
        <title>Image Test</title>
        <style type="text/css">
            img.img-responsive {
                display: block;
                max-width: 100%;
                height: auto;
            }
            img.fig{
                display: block;
                max-width: 10000px;
                height: auto;
            }
      </style>
   </head>
   <body>
        <h2>Image Test</h2>
        <p>Image: width="100%"</p>
        <img class="img-responsive" alt="fig" src="img/fig.jpg"/>
        <script>
            window.addEventListener('load', function() {
                SaxonJS.transform({
                stylesheetLocation: "handle-click.sef.xml"
                });
            })
        </script>
        <script type="text/javascript" src="js/SaxonJS.min.js"></script>
   </body>
</html>

但是，单击图像时什么也没有发生。这个HTML文件(或样式表)有什么问题？

javascript

html

xslt

saxon

saxon-js

回答 1

Stack Overflow用户

发布于 2017-12-21 04:40:07

我不知道为什么要尝试使用ixsl:set-style来操作元素的类，我认为应该使用元素的DOM classList属性和它的toggle方法。

我也不确定是否可以仅使用样式表来调用transform方法。

下面你可以找到我用Saxon-JS 1.0.2测试过的一个示例(用火狐本地测试)，它插入一个div (不想使用图像)并调用它的classList toggle方法，提供你想要切换的toggle类名作为参数：

<!DOCTYPE HTML>
<html>
   <head>
        <title>Saxon-JS test</title>
        <style type="text/css">
            div.responsive {
                border: 5px solid green;
                display: block;
                max-width: 100%;
                height: auto;
            }
            div.fig{
                border: 10px solid yellow;
            }
      </style>
   </head>
   <body>
        <h2>Saxon-JS test</h2>
        <section id="saxon-target"></section>
        <script>
            window.addEventListener('load', function() {
                SaxonJS.transform({
                stylesheetLocation: "test2017122001.sef.xsl",
                initialTemplate: "Q{http://www.w3.org/1999/XSL/Transform}initial-template"
                });
            })
        </script>
        <script type="text/javascript" src="../../Saxon-JS-1.0.2/SaxonJS.min.js"></script>
   </body>
</html>

XSLT是

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    xmlns:ixsl="http://saxonica.com/ns/interactiveXSLT"
    extension-element-prefixes="ixsl"
    exclude-result-prefixes="xs"
    version="3.0">

    <xsl:template name="xsl:initial-template">
      <xsl:result-document href="#saxon-target">
         <div class="responsive">This is a test.</div>
      </xsl:result-document>
    </xsl:template>

    <xsl:template match="div[contains(@class,'responsive')]" mode="ixsl:onclick">
        <xsl:sequence select="ixsl:call(ixsl:get(., 'classList'), 'toggle', ['fig'])[current-date() lt xs:date('2000-01-01')]"/>
    </xsl:template>

</xsl:stylesheet>

CSS样式的改变(例如边框颜色和宽度的改变)会在div被点击的时候被应用，这样可以帮助你为你想要操作classList的img设置类似的代码。

Example现在也在https://martin-honnen.github.io/xslt/2017/test2017122001.html上在线，可以在Windows10上使用当前版本的Edge、IE、Chrome和Firefox。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47907922

复制

相似问题

问如何通过Saxon-JS调整图像大小？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过Saxon-JS调整图像大小？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过Saxon-JS调整图像大小？
EN