web-dev-qa-db-ja.com

ズームcss / javascript

Div.style.topのようなjavascriptを介してズームプロパティを制御する方法、ズームを指定する方法を知りたいですか?

20
sat

FirefoxとChrome(Webkit)でIE固有のzoomプロパティに相当するものは、それぞれ -moz-transform および -webkit-transform

サンプルコードは次のようになります。

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

Javascriptにはもう少し注意する必要があります(最初に存在をテストします)が、Javascriptを操作する方法は次のとおりです。

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

これはstyleのプロパティですが、すべてのブラウザでサポートされているわけではありません。これは、Internet Explorerが実装する CSSの非標準のMicrosoft拡張機能 です。次のようにアクセスします。

div.style.zoom
3
zombat

Zoomoz と呼ばれる軽量のjQueryプラグインを試してみるとよいでしょう。 CSS3変換プロパティ(変換、回転、スケーリング)を使用します。 「jQueryウェイのズーム」セクションをチェックしてください。

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