[英]How can I get image resizing via Saxon-JS?
我有一個以下HTML文件,用於通過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文件(或樣式表)有什么問題?
我不確定為什么您嘗試使用ixsl:set-style
來操縱元素的類,我認為您應該使用元素的DOM classList
屬性並使用其toggle
方法。
我也不確定您是否可以僅使用樣式表來調用transform
方法。
在下面,您可以找到一個我使用Saxon-JS 1.0.2(在Firefox中本地測試)的示例,該示例插入div
(不想使用圖像)並調用其classList
toggle
方法,並提供您想要的CSS類名稱。切換為參數:
<!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>
單擊div
時,將應用CSS樣式更改(例如,邊框顏色和寬度更改),以幫助您為要操作其classList的img設置類似的代碼。
該示例現在也位於https://martin-honnen.github.io/xslt/2017/test2017122001.html上,並且可以在Windows 10上使用Edge,IE,Chrome和Firefox的當前版本。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.