JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript】clipプロパティで配置済み要素の表示されている部分を取得・設定する方法

絶対配置（position: absolute）された要素のうち、どの部分が表示されているかを取得・制御するには、JavaScriptでclipプロパティを使用します。

clipプロパティは、要素の表示領域をrect()関数で定義し、指定した矩形の範囲だけを切り抜いて表示できます。rect()の4つの値は、それぞれ要素の「上・右・下・左」の各辺から内側へのオフセット距離を順に指定します。

また、現在設定されているクリップ範囲を取得したい場合は、element.style.clipまたはgetComputedStyle(element).clipを参照することで確認できます。

サンプルコード

次のコードを実行すると、「Clip」ボタンをクリックしたときに画像が切り抜かれて表示される様子を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            position: absolute;
            top: 100px;
         }
      </style>
   </head>
   <body>
      <button type="button" onclick="display()">Clip</button><br>
      <img id="newImg" src="https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg" width="170" height="150">
      <script>
         function display() {
            document.getElementById("newImg").style.clip = "rect(10px 90px 90px 10px)";
         }
      </script>
   </body>
</html>

コードのポイント

  • style.clip = "rect(10px 90px 90px 10px)" によって、画像の表示範囲を上10px・右90px・下90px・左10pxの矩形に限定しています。
  • clipプロパティが機能するのは、対象要素がposition: absoluteやposition: fixedで配置されている場合のみです。静的な配置の要素には適用できません。
  • より現代的な実装では、同様の切り抜き効果を実現できるclip-pathプロパティの利用も検討するとよいでしょう。
  1. JavaScriptとCSSでドラッグ可能なHTML要素を作成する方法

    JavaScriptとCSSを組み合わせることで、マウスで掴んで自由に移動できる「ドラッグ可能なHTML要素」を簡単に実装できます。本記事では、実際に動作するサンプルコードと、その内部処理の仕組みをわかりやすく解説します。 ドラッグ可能なDIV要素のサンプルコード 以下のコードでは、position: absoluteで配置したDIV要素に対して、マウスイベント（mousedown・mousemove・mouseup）を利用してドラッグ機能を実装しています。 <!DOCTYPE html> <html> <style> body {

  2. JavaScriptでIDを指定して要素を削除する方法

    JavaScriptでIDを指定して要素を削除するIDを使ってHTML要素を削除するには、remove()メソッドを使用します。このメソッドは、対象のDOM要素をドキュメントから直接取り除くことができる、最もシンプルで直感的な方法です。コード例以下は実際のサンプルコードです。<!DOCTYPE html> <html lang=ja> <head>    <meta charset=UTF-8>    <meta name=viewport content=width=device-width, in