缩放 css/javascript
Posted
技术标签:
【中文标题】缩放 css/javascript【英文标题】：zoom css/javascript 【发布时间】：2011-01-02 20:01:47 【问题描述】：我想知道如何通过javascript控制缩放属性， 像 div.style.top ，如何指定缩放？
【问题讨论】：
它似乎不存在。这是一个包含（我认为所有）css 属性到 javascript 的表。 codepunk.hardwar.org.uk/css2js.htm 感谢链接，很有用。不幸的是，没有你提到的缩放！ 【参考方案1】：IE 特定的zoom 属性的 Firefox 和 Chrome (Webkit) 等效项分别为 -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)';
【讨论】：
el.style.zoom = 1.5;工作很酷，我以错误的方式赋予价值！，缩放的可接受数字是多少？是在 1 到 2 之间，如果我提到 1.5 是 150 % 吗？ 我不确定缩放级别是否受到限制。是的，1.5 => 150% 1 == 100%，你可以超过 2。 更新：zoom 也是一个有效的 Chrome CSS 属性。
IE9 supports transforms: -ms-transform: scale(1.5);。它比zoom 更好用；在比较 IE9 和 Chrome 之间的结果时 - 它不一样。 （IE和Chrome处理<body>的边距与zoom不同，所以用-*-transform。9之前的IE版本带来其他问题，不得不禁用缩放功能。There are workarounds.）【参考方案2】：
它是style 的属性，但并非所有浏览器都支持。这是 Internet Explorer 实现的non-standard Microsoft extension of CSS。访问方式如下：
div.style.zoom
【讨论】：
我主要在 Safari 中进行测试，在 Safari 中，如果我以 css 样式给出缩放值，它可以工作，但不能 div.style.zoom=200% 或 200+"%" 或 200 或 "200%" . zoom 是一个非标准属性，所以 webkit 引擎无法识别它。【参考方案3】：您可能想尝试一个名为Zoomoz 的轻量级jQuery 插件。它使用 CSS3 变换属性（平移、旋转、缩放）。查看“缩放 jQuery 方式”部分。希望对您有所帮助。
$(document).ready(function()
$("#element").zoomTarget();
);
【讨论】：
以上是关于缩放 css/javascript的主要内容，如果未能解决你的问题，请参考以下文章
R数据缩放值标准缩放（standardization scaling）以及最小最大缩放（Min-Max scaling）