Question

我有一个div包含一些html内容，如文本和表格，通过使用jQuery或任何其他工具，我需要使html内容放大＆amp;进行。

我尝试过以下代码，但它在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＆amp; IE但不是在Firefox中。有什么办法解决这个问题？感谢。

Answer 1

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

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

-moz-transform: scale(4);

您可以使用以下内容将其应用于JS：

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

Firefox在放大和调出div内的html内容时出现问题

1 个答案: