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

HTMLDOMスタイルのクリッププロパティ

HTML DOMスタイルのクリッププロパティは、配置された要素を表示部分に設定または取得するために使用されます。

以下は、-

の構文です。 クリッププロパティの設定-

object.style.clip = "auto|rect(top right bottom left)|initial|inherit"

上記の特性は次のように説明されます-

値 説明
自動 要素はクリップせず、これがデフォルト値です。
rect（右上から左下） 指定された4つの座標に従って形状をクリップします。
初期 このプロパティを初期値に設定します。
継承 親プロパティ値を継承するには

クリッププロパティの例を見てみましょう-

例 

<!DOCTYPE html>
<html>
<head>
<style>
   div{
      position:relative;
   }
   #IMG1{
      width:200px;
      height:200px;
      position:absolute;
   }
   #P1{
      position:absolute;
      margin-top:210px;
   }
   button{
      margin-top: 250px;
   }
</style>
<script>
   function changeClip(){
      document.getElementById("IMG1").style.clip="rect(0px 75px 75px 0px)";
      document.getElementById("Sample").innerHTML="The image clip property is changed now ";
   }
</script>
</head>
<body>
   <div >
      <img id="IMG1" src="https://www.tutorialspoint.com/hibernate/images/hibernate-mini-logo.jpg">
      <p id="P1">Change the above image clip property by clicking the below button</p>
      <button onclick="changeClip()">Change Clip</button>
      <p id="Sample"></p>
   </div>
</body>
</html>

出力

HTMLDOMスタイルのクリッププロパティ

「クリップの変更」をクリックすると ボタン-

HTMLDOMスタイルのクリッププロパティ


  1. HTMLDOMスタイルtransformOriginプロパティ

    HTML DOMスタイルのtransformOriginプロパティは、2Dまたは3D変換を返し、HTMLドキュメントの要素に適用します。 構文 以下は構文です- transformOriginを返す object.style.transformOrigin transformOriginの変更 object.style.transformOrigin = “value” 値 ここで、値は-になります。 値 説明 継承 このプロパティ値は親要素から継承されます。 初期 このプロパティ値をデフォルト値に設定します。 x軸y軸z軸 ビュー

  2. HTMLDOMスタイルのクリッププロパティ

    HTML DOMスタイルのクリッププロパティは、配置された要素を表示部分に設定または取得するために使用されます。 以下は、-の構文です。 クリッププロパティの設定- object.style.clip = "auto|rect(top right bottom left)|initial|inherit" 上記の特性は次のように説明されます- 値 説明 自動 要素はクリップせず、これがデフォルト値です。 rect（右上から左下） 指定された4つの座標に従って形状をクリップします。 初期 このプロパティを初期値に設定します。 継承