html - Firefox 在 div 中放大和缩小 html 内容的问题

Question

我有一个 div，其中包含一些 html 内容，如文本和表格，通过使用 jQuery 或我需要使该 html 内容放大和缩小的任何其他工具。

我试过下面的代码，但它在 Firefox 中不起作用。

HTML

<input type="button" id="zoomin" value="+" onclick="return ZoomIn();">
<input type="button" id="zoomout" value="-"  onclick="return ZoomOut();"> 
<div class="imgBox" id="imgBox" style="zoom: 100%;">
//My content
</div>

JS

function ZoomIn() {
    var ZoomInValue = parseInt(document.getElementById("imgBox").style.zoom) + 10 + '%'
document.getElementById("imgBox").style.zoom = ZoomInValue;
return false;
}

function ZoomOut() {
var ZoomOutValue = parseInt(document.getElementById("imgBox").style.zoom) - 10 + '%'
document.getElementById("imgBox").style.zoom = ZoomOutValue;
return false;
}

上面的代码在 Chrome 和 IE 中运行，但在 Firefox 中不运行。解决方法是什么？谢谢。

Answer 1

Firefox 不支持该zoom属性：http ://www.browsersupport.net/CSS/zoom

以下是在 FF 中使用 CSS 实现类似效果所需的示例：

-moz-transform: scale(4);

您可以使用以下方式将其与 JS 一起应用：

document.getElementById("imgBox").style.MozTransform = 'scale(4)';