HTML DOM 스타일 클립 속성

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>

출력

HTML DOM 스타일 클립 속성

'클립 변경'을 클릭하면 버튼 -

HTML DOM 스타일 클립 속성