HTML DOM 스타일 borderImageSource 속성

<시간/>

HTML DOM borderImageSource 속성은 요소의 테두리 이미지로 사용할 이미지의 소스를 설정하거나 반환하는 데 사용됩니다.

다음은 −

의 구문입니다.

borderImageSource 속성 설정 -

object.style.borderImageSource = "none|image|initial|inherit"

위의 속성은 다음과 같이 설명됩니다 -

값	설명
없음	이미지가 사용되지 않음을 의미합니다. 테두리 스타일이 지정되면 적용됩니다.
이미지	테두리로 사용할 이미지의 경로를 지정합니다. 테두리로 사용할 이미지의 경로
아프다	테두리 이미지 중간 부분을 유지하기 위해 사용됩니다.
초기	이 속성을 기본값으로 설정합니다.
상속	상위 속성 값을 상속합니다.

borderImageSource 속성의 예를 살펴보겠습니다 -

예시

<!DOCTYPE html>
<html>
<head>
<style>
   #DIV1 {
      width: 400px;
      margin: 15px;
      padding: 10px;
      border: 20px solid transparent;
      border-image-source: url("https://www.tutorialspoint.com/asp.net/images/asp.net-mini-logo.jpg");
      border-image-slice: 30;
   }
</style>
<script>
   function changeBorderImage(){
      document.getElementById("DIV1").style.borderImageSource="url('https://www.tutorialspoint.com/images/Swift.png?auto=compress&cs=tinysrgb&dpr=1&w=500')";
      document.getElementById("Sample").innerHTML="The border image is now changed";
   }
</script>
</head>
<body>
<div id="DIV1">This is some sample text inside div</div>
<p>Change the above div border image by clicking the below button</p>
<button onclick="changeBorderImage()">Change Border Image</button>
<p id="Sample"></p>
</body>
</html>

출력

HTML DOM 스타일 borderImageSource 속성

'테두리 이미지 변경' 클릭 시 버튼 -

HTML DOM 스타일 borderImageSource 속성

위의 예에서 -

해당 CSS 스타일이 적용되고 일부 텍스트가 포함된 ID가 "DIV1"인 div를 만들었습니다. CSS 스타일의 border-image-source 속성을 사용하여 테두리 이미지를 지정하고 속성 값으로 이미지 URL을 지정했습니다 -

#DIV1 {
width: 400px;
margin: 15px;
padding: 10px;
border: 20px solid transparent;
border-image-source: url("https://www.tutorialspoint.com/asp.net/images/asp.net-mini-logo.jpg ");
border-image-slice: 30;
}
<div id="DIV1">This is some sample text inside div</div>

그런 다음 "테두리 이미지 변경 버튼을 만들었습니다. " 사용자가 클릭하면 changeBorderImage() 메서드를 실행합니다 -

<button onclick="changeBorderImage()">Change Border Image</button>

changeBorderImage()는 getElementById() 메서드를 사용하여 DIV1 요소를 가져오고 해당 borderImageSource 속성 값을 가져옵니다. 그런 다음 url 메소드에 url 값을 할당하여 이미지 url을 할당합니다. 그런 다음 innerHTML 속성을 사용하여 ID가 "Sample"인 단락에서 이 변경 사항을 나타내는 의도된 메시지를 표시합니다 -

function changeBorderImage(){
document.getElementById("DIV1").style.borderImageSource="url(''https://www.tutorialspoint.com/images/Swift.png?auto=compress&cs=tinysrgb&dpr=1&w=500')";
document.getElementById("Sample").innerHTML="The border image is now changed";
}