Saxon-JS를 통해 이미지 크기를 조정하려면 어떻게해야합니까?

JavaScript를 통해 이미지 크기를 테스트하는 다음 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() { 
       [].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를 통해 동일한 작업을 수행하겠습니다. 다음 첫 스타일은 :

[핸들 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>

I 산소 19.1 통해이 스타일 시트를 컴파일하고 핸들 click.sef 파일을 생성했다. 그런 다음 Saxon-JS 라이브러리를 사용하도록 위의 HTML을 수정했습니다.

<!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 파일 (또는 스타일 시트)의 문제점은 무엇입니까?

출처

2017-12-20 tmakita

ixsl:set-style을 사용하여 요소의 클래스를 조작하려고하는 이유가 확실하지 않은데 DOM classList 요소의 속성을 사용해야하고 해당 toggle 메서드를 사용해야한다고 생각합니다.

또한 transform 메서드를 스타일 시트와 함께 호출 할 수 있는지 확신 할 수 없습니다.

당신은 삽입과 나는 (로컬 파이어 폭스) 테스트 한 샘플 색슨-JS 1.0.2을 찾을 수 아래 div (이미지를 사용하지 않았다)와 CSS 클래스를 제공하고, 그 classListtoggle 메소드를 호출

<!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가 도움이 될 수 있도록 div을 클릭 할 때 적용되는

<?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의 스타일의 변화 (예를 들어 테두리 색상과 폭 변경)입니다 : 당신은 인자로 전환 할 이름 classList를 조작하려는 img에 대해 비슷한 코드를 설정한다.

예제는 현재 https://martin-honnen.github.io/xslt/2017/test2017122001.html에서 온라인으로 제공되며 Windows 10에 최신 버전의 Edge, IE, Chrome 및 Firefox와 함께 작동합니다.

출처

2017-12-20 20:40:07

Saxon-JS를 통해 이미지 크기를 조정하려면 어떻게해야합니까?

답변

관련 문제