Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML DOM 스타일 borderBottomStyle 속성

<시간/>

borderBottomStyle 속성은 요소의 하단 테두리에 대한 선 스타일을 설정하거나 가져오는 데 사용됩니다.

구문

다음은 −

의 구문입니다.

borderBottomStyle 속성 설정

object.style.borderBottomStyle = value

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

Sr.No 가치 및 설명
1 없음
이것은 기본값이며 경계를 정의하지 않습니다.
2 숨김
이것은 "없음"과 동일하지만 여전히 경계 공간을 차지합니다. 기본적으로 투명하지만 여전히 존재합니다.
3 점선
이것은 점선 테두리를 정의합니다.
4 대시
이것은 파선 테두리를 정의합니다.
5 단단함
이것은 단색 테두리를 정의합니다.
6 이중
이것은 이중 테두리를 정의합니다.
7 그루브
이것은 3d 그루브 경계를 정의하며 능선의 반대입니다.
8 릿지
이것은 3D 융기된 경계를 정의하며 홈의 반대입니다.
9 삽입
이것은 3D 삽입 테두리를 정의하고 효과가 포함된 것처럼 보입니다. 처음과 반대되는 효과를 냅니다.
10 시작
이것은 3D 삽입 테두리를 정의하고 효과가 엠보싱된 것처럼 보입니다. 그것은 삽입의 반대 효과를 생성합니다.
11 초기
이 속성을 초기 값으로 설정합니다.
12 상속
상위 속성 값을 상속하려면

예시

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

<!DOCTYPE html>
<html>
<head>
<style>
   #DIV1{
      width:300px;
      height:100px;
      border-bottom: 8px solid dodgerblue;
      border-bottom-style: groove;
   }
</style>
<script>
   function changeBottomStyle(){
      document.getElementById("DIV1").style.borderBottomStyle="dashed";
      document.getElementById("Sample").innerHTML="The bottom border style is now changed";
   }
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>Change the div bottom border style size by clicking the below button</p>
<button onclick="changeBottomStyle()">Change Bottom Style</button>
<p id="Sample"></p>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 스타일 borderBottomStyle 속성

"하단 스타일 변경" 버튼을 클릭하면 -

HTML DOM 스타일 borderBottomStyle 속성