缩放 CSS/JavaScript

Question

我想知道如何通过javascript控制缩放属性， 像 div.style.top 一样，如何指定缩放？

Answer 1

火狐浏览器和Chrome (Webkit) 相当于 IE 特定的 zoom 属性，分别是 -moz-transform 和 -webkit-transform。

示例代码如下：

.zoomed-element {
    zoom: 1.5;
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
}

您必须对 Javascript 更加小心（首先测试是否存在），但操作它们的方法如下：

el.style.zoom = 1.5;
el.style.MozTransform = 'scale(1.5)';
el.style.WebkitTransform = 'scale(1.5)';

Answer 2

它是 style 的一个属性，但并非所有浏览器都支持。它是 Internet Explorer 实现的 CSS 的非标准 Microsoft 扩展。它的访问方式如下：

div.style.zoom

Answer 3

您可能想尝试一个名为 Zoomoz 的轻量级 jQuery 插件。它使用 CSS3 变换属性（平移、旋转、缩放）。查看“缩放 jQuery 方式”部分。希望它有所帮助。

$(document).ready(function() {
    $("#element").zoomTarget();
});