Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript로 요소가 걸쳐야 하는 열 수 설정하기

JavaScript에서 요소가 여러 열에 걸쳐 표시되도록 하려면 columnSpan 속성을 all로 설정하면 됩니다. 이 속성을 사용하면 제목이나 특정 요소가 다단 레이아웃의 모든 열을 가로지르며 확장됩니다.

아래 예제 코드를 실행하면 버튼 클릭 시 JavaScript를 통해 요소가 차지해야 할 열 범위를 지정할 수 있습니다.

예제 코드

<!DOCTYPE html>
<html>
   <head>
      <style>
         #myID {
            column-count: 4;
         }
      </style>
   </head>
   
   <body>
      <p>참고- columnSpan 속성은 Firefox에서는 작동하지 않습니다.</p>
      <button onclick = "display()">열 걸치기</button>
      <div id = "myID">
         <h1 id = "h1ID">데모용 제목 레벨 1</h1>
         데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
         데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
         데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
         데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
         데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
      </div>
      
      <script>
         function display() {
            document.getElementById("h1ID").style.columnSpan = "all";
         }
      </script>
      
   </body>
</html>

코드 설명: 위 예제에서는 column-count: 4; 스타일로 본문 영역을 4개의 열로 나누었습니다. 버튼을 클릭하면 display() 함수가 호출되어 h1 제목 요소의 columnSpan 속성이 all로 변경되고, 그 결과 제목이 4개 열 전체에 걸쳐 확장되어 표시됩니다.

columnSpan 속성의 주요 값은 다음과 같습니다.

  • 1 - 기본값으로, 요소가 하나의 열만 차지합니다.
  • all - 요소가 모든 열에 걸쳐 확장됩니다.