스타일 borderWidth 속성
예시
<div> 요소의 네 테두리 너비를 변경합니다.
document.getElementById("myDiv").style.borderWidth = "thick";
정의 및 사용
borderWidth 속성은 요소의 테두리 너비를 설정하거나 반환합니다.
이 속성은 1~4개의 값을 가질 수 있습니다.
- 다음과 같은 하나의 값: p {border-width: Thick} - 네 개의 테두리가 모두 두꺼워집니다.
- 다음과 같은 두 가지 값: p {border-width: thick thin} - 위쪽 및 아래쪽 테두리가 두꺼워지고 왼쪽 및 오른쪽 테두리가 얇아집니다.
- 다음과 같은 세 가지 값: p {border-width: 두꺼운 얇은 중간}- 위쪽 테두리는 굵게, 왼쪽 및 오른쪽 테두리는 가늘게, 아래쪽 테두리는 중간
- 다음과 같은 4가지 값: p {border-width: 두꺼운 얇은 중간 10px} - 위쪽 테두리는 굵게, 오른쪽 테두리는 가늘게, 아래쪽 테두리는 중간, 왼쪽 테두리는 10px
브라우저 지원
Property | |||||
---|---|---|---|---|---|
borderWidth | Yes | Yes | Yes | Yes | Yes |
통사론
borderWidth 속성을 반환합니다.
object.style.borderWidth
borderWidth 속성을 설정합니다.
object.style.borderWidth = "thin|medium|thick|length|initial|inherit"
속성 값
Value | Description |
---|---|
thin | Defines a thin border |
medium | Defines a medium border. This is default |
thick | Defines a thick border |
length | The width of the border in length units |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
기술적 세부 사항
기본값: | 중간 |
---|---|
반환 값: | 요소의 테두리 너비를 나타내는 String |
CSS 버전 | CSS1 |
더 많은 예
예시
위쪽 및 아래쪽 테두리의 너비를 굵게 변경하고 왼쪽 및 오른쪽 테두리를 <div> 요소의 가늘게 변경합니다.
document.getElementById("myDiv").style.borderWidth = "thick thin";
예시
길이 값 을 사용하여 <div> 요소의 네 테두리 너비를 변경합니다 .
document.getElementById("myDiv").style.borderWidth = "1px 5px 10px 20px";
예시
<div> 요소의 테두리 너비를 반환합니다.
alert(document.getElementById("myDiv").style.borderWidth);
관련 페이지
CSS 튜토리얼: CSS 테두리
CSS 참조: border-width 속성
HTML DOM 참조: 테두리 속성
❮ 스타일 개체