HTML DOM의 borderImageWidth 속성은 웹 페이지 요소의 테두리 이미지(border-image) 너비를 설정하거나 현재 값을 가져오는 데 사용됩니다. 이 속성을 활용하면 자바스크립트만으로도 테두리 이미지의 두께를 동적으로 조절할 수 있습니다.
문법
borderImageWidth 속성을 설정하는 기본 구문은 다음과 같습니다.
object.style.borderImageWidth = "number|%|auto|initial|inherit"
속성값 설명
| 값 | 설명 |
|---|---|
| length | px 등 절대 단위로 테두리 너비 크기를 지정합니다. |
| number | 해당 테두리 너비의 배수로 너비를 지정합니다. 기본값은 1입니다. |
| % | 테두리 이미지 영역 너비에 대한 수평·수직 오프셋을 백분율(%)로 지정합니다. |
| auto | 이미지의 원본 너비와 높이에 맞춰 자동으로 설정합니다. |
| initial | 해당 속성을 기본(default) 값으로 되돌립니다. |
| inherit | 부모 요소의 속성값을 상속받습니다. |
그럼 borderImageWidth 속성의 실제 사용 예제를 살펴보겠습니다.
예제
다음 예제는 버튼을 클릭하면 div 요소의 테두리 이미지 너비가 10px에서 30px로 변경되는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
width: 400px;
padding: 25px;
border-style: solid;
border-color: transparent;
border-image-slice: 30;
border-image-source: url("https://www.tutorialspoint.com/ethereum/images/ethereum-mini-logo.jpg");
border-image-width: 10px;
}
</style>
<script>
function changeBorderWidth(){
document.getElementById("DIV1").style.borderImageWidth="30px";
document.getElementById("Sample").innerHTML="테두리 이미지 너비가 증가되었습니다";
}
</script>
</head>
<body>
<div id="DIV1">안녕하세요</div>
<p>아래 버튼을 클릭하면 위 div의 테두리 이미지 너비가 늘어납니다</p>
<button onclick="changeBorderWidth()">테두리 너비 변경</button>
<p id="Sample"></p>
</body>
</html>
실행 결과
버튼을 클릭하기 전 초기 화면입니다.
“테두리 너비 변경” 버튼을 클릭한 후의 화면입니다. 테두리 이미지 너비가 30px로 늘어난 것을 확인할 수 있습니다.
