ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript を使用して画像のサイズを変更する方法のサンプル コード

JavaScript を使用して画像のサイズを変更する方法のサンプル コード

黄舟
黄舟オリジナル
2017-07-26 13:50:231799ブラウズ

注: js を使用して画像の実際のサイズを変更することはできません。変更されるのは、タグ内の画像に対応する幅と高さの属性のみです。

1. var p = document.getElementById('image') を通じて、ID に対応する DOM オブジェクトを取得します。

2. 次に、オブジェクトの style 属性を使用します (画像オブジェクトに style 属性が設定されている場合)。 .style.width ='200px' (覚えておいてください: これは文字列です。形式は次のようになります:???px、数字だけを書くことはできません。そうしないと、一部のブラウザでは画像のサイズが変わりません)

以下コードが実装されています。ボタンをクリックするたびに、画像を拡大または縮小できます。

画像の幅と高さを記録するために、スクリプト内で 2 つのグローバル変数を定義しました。これは、style.width または style.height 属性値が次のとおりであるためです。文字列なので、New String(x++)+'px' を使用して属性値を入力します。このテクニックは、後で簡単に確認できるようにここに記録されています。

以上がJavaScript を使用して画像のサイズを変更する方法のサンプル コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。