HTML DOM ColumnGroup 범위 속성

<시간/>

HTML DOM ColumnGroup span 속성은 HTML 요소의 span 속성과 연결됩니다. ColumnGroup 범위 속성은 열 그룹의 범위 특성 값을 설정하거나 반환합니다. span 속성은 요소가 확장되어야 하는 열의 수를 정의하는 데 사용됩니다.

구문

다음은 −

의 구문입니다.

ColumnGroup 범위 속성 설정 -

columngroupObject.span = number

여기서 숫자는 요소가 확장되어야 하는 열의 수를 지정합니다.

예시

ColumnGroup 범위 속성에 대한 예를 살펴보겠습니다 -

<!DOCTYPE html>
<html>
<head>
<style>
   table, th, td {
      border: 1px solid blue;
   }
</style>
</head>
<body>
<table>
<colgroup id="Colgroup1"></colgroup>
<tr>
<th>Fruit</th>
<th>COLOR</th>
<th>Price</th>
</tr>
<tr>
<td>watermelon</td>
<td>dark green</td>
<td>40Rs</td>
</tr>
<tr>
<td>papaya</td>
<td>yellow</td>
<td>30Rs</td>
</tr>
</table>
<p>lick the button to change the background color of the first two columns.
<button onclick="changeColor()">CHANGE</button>
<script>
   function changeColor() {
      document.getElementById("Colgroup1").span = "2";
      document.getElementById("Colgroup1").style.backgroundColor = "lightgreen";
   }
</script>
</body>
</html>

출력

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

HTML DOM ColumnGroup 범위 속성

CHANGE 버튼을 클릭하면 -

HTML DOM ColumnGroup 범위 속성

위의 예에서 -

2개의 행과 3개의 열이 있는 테이블을 만들었습니다. 테이블, th 및 td 요소에도 몇 가지 스타일이 적용되었습니다. -

table, th, td {
   border: 1px solid blue;
}
<table>
<colgroup id="Colgroup1"></colgroup>
<tr>
<th>Fruit</th>
<th>COLOR</th>
<th>Price</th>
</tr>
<tr>
<td>watermelon</td>
<td>dark green</td>
<td>40Rs</td>
</tr>
<tr>
<td>papaya</td>
<td>yellow</td>
<td>30Rs</td>
</tr>
</table>

그런 다음 사용자가 클릭할 때 changeColor() 메서드를 실행하는 CHANGE 버튼을 만들었습니다.

<button onclick="changeColor()">CHANGE</button>

changeColor() 함수는 getElementById() 메서드를 사용하여 요소를 가져오고 요소 ID를 매개변수로 제공합니다. 그런 다음 요소 범위를 2로 설정하고 배경색을 녹색으로 변경합니다. 이렇게 하면 요소의 span 속성에 지정된 대로 왼쪽에서 처음 두 열이 녹색이 됩니다.

function changeColor() {
   document.getElementById("Colgroup1").span = "2";
   document.getElementById("Colgroup1").style.backgroundColor = "lightgreen";
}