HTML DOM 열 객체

<시간/>

HTML DOM Column 개체는 HTML 요소와 연결됩니다. Column 개체는 요소의 속성을 가져오거나 설정하는 데 사용됩니다. 태그는

요소 내에서만 사용됩니다.

속성

다음은 열 개체의 속성입니다 -

속성	설명
스팬	열의 범위 속성 값을 설정하거나 반환합니다.

구문

다음은 −

의 구문입니다.

열 개체 만들기 -

var a = document.createElement("COL");

예시

열 개체에 대한 예를 살펴보겠습니다. -

<!DOCTYPE html>
<html>
<head>
<style>
   table, th, td {
      border: 1px solid blue;
   }
   #Col1{
      background-color:pink;
   }
</style>
</head>
<body>
<h3>COL OBJECT</h3>
<table>
<colgroup>
<col id="Col1" span="2">
<col style="background-color:lightgreen">
</colgroup>
<tr>
<th>Fruit</th>
<th>Color</th>
<th>Price</th>
</tr>
<tr>
<td>Mango</td>
<td>Yellow</td>
<td>100Rs</td>
</tr>
<tr>
<td>Guava</td>
<td>Green</td>
<td>50Rs</td>
</tr>
</table>
<p>Click the below button to get span of the "COL1" col element</p>
<button onclick="colObj()">COLUMN</button>
<p id="Sample"></p>
<script>
   function colObj() {
      var x = document.getElementById("Col1").span;
      document.getElementById("Sample").innerHTML = "The Col1 element has span= "+x;
   }
</script>
</body>
</html>

출력

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

HTML DOM 열 객체

COLUMN 버튼 클릭 시 -

HTML DOM 열 객체

위의 예에서는 2개의 행과 3개의 열이 있는 테이블을 만들었습니다. 테이블에는 전체적으로 스타일이 적용되었습니다. 테이블 내부에는 두 개의 요소가 있는데 하나는 span이 2이고 다른 하나에는 인라인 스타일이 적용되어 있습니다. 첫 번째 범위는 2이므로 해당 스타일은 정확히 두 열에 적용되고 두 번째 은 나머지 열에 스타일을 적용합니다 -

table, th, td {
   border: 1px solid blue;
}
#Col1{
   background-color:pink;
}
<table>
<colgroup>
<col id="Col1" span="2">
<col style="background-color:lightgreen">
</colgroup>
<tr>
<th>Fruit</th>
<th>Color</th>
<th>Price</th>
</tr>
<tr>
<td>Mango</td>
<td>Yellow</td>
<td>100Rs</td>
</tr>
<tr>
<td>Guava</td>
<td>Green</td>
<td>50Rs</td>
</tr>
</table>

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

<button onclick="colObj()">COLUMN</button>

colObj() 메서드는 문서 객체의 getElementById() 메서드를 사용하여 첫 번째 요소를 가져옵니다. 그런 다음 요소의 span 속성 값을 가져와 변수 x에 할당합니다. 변수 x에 저장된 span 속성 값은 단락의 innerHTML 속성을 사용하여 id가 "Sample"인 단락에 표시됩니다 -

function colObj() {
   var x = document.getElementById("Col1").span;
   document.getElementById("Sample").innerHTML = "The Col1 element has span= "+x;
}

가 있습니다.