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

HTML DOM 스타일 borderStyle 속성

<시간/>

HTML DOM borderStyle 속성은 요소의 테두리 스타일 속성을 가져오거나 설정하기 위한 약어로 사용됩니다. 다음과 같은 방식으로 1에서 4까지의 값을 취합니다. -

  • 4개의 값이 모두 주어지면 시계 방향으로 테두리 스타일을 할당합니다.

  • 하나의 값만 지정하면 4개의 테두리 모두에 동일한 스타일이 적용됩니다.

  • 두 개의 값이 주어지면 위, 아래가 첫 번째 값으로 설정되고 왼쪽과 오른쪽이 두 번째 값으로 설정됩니다.

다음은 −

의 구문입니다.

borderStyle 속성 설정:

object.style.borderLeftStyle = value

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

설명
없음 테두리를 지정하지 않는 기본값입니다.
숨김 이것은 "없음"과 동일하지만 여전히 테두리 공간을 차지합니다. 기본적으로 투명하지만 여전히 존재합니다.
점선 점선 테두리를 정의합니다.
파선 이것은 점선 테두리를 정의합니다.
솔리드 단색 테두리를 정의합니다.
더블 이중 테두리를 정의합니다.
그루브 3d 홈 테두리를 정의하며 능선의 반대입니다.
릿지 이것은 3D 융기된 테두리를 정의하며 홈의 반대입니다.
삽입 3D 삽입 테두리를 정의하고 효과가 포함된 것처럼 보입니다. 처음과 반대의 효과를 냅니다.
시작 이것은 3D 삽입 테두리를 정의하고 효과가 엠보싱된 것처럼 보입니다. 그것은 삽입의 반대 효과를 생성합니다.
초기 이 속성을 초기 값으로 설정합니다.
상속 상위 속성 값을 상속하려면

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

예시

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

출력

HTML DOM 스타일 borderStyle 속성

'테두리 스타일 변경'을 클릭하면 버튼 -

HTML DOM 스타일 borderStyle 속성