0
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>
私は、酸素19.1を経て、このスタイルシートをコンパイルし、ハンドル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ファイル（またはスタイルシート）で何が問題になっていますか？